@matechat/ng 17.4.0-alpha.0 → 17.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/fesm2022/matechat-ng.mjs
CHANGED
|
@@ -1518,11 +1518,11 @@ class McFileListComponent extends BaseComponent {
|
|
|
1518
1518
|
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
|
|
1519
1519
|
}
|
|
1520
1520
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: McFileListComponent, deps: [{ token: LocaleService }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1521
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: McFileListComponent, isStandalone: true, selector: "mc-file-list", inputs: { fileItems: "fileItems", context: "context" }, outputs: { remove: "remove", retryUpload: "retryUpload", download: "download", preview: "preview", retryDownload: "retryDownload" }, host: { listeners: { "document:keydown": "handleKeyDown($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"mc-file-list\" [class]=\"`mc-file-list--context-${context}`\">\r\n <div class=\"mc-file-list__container\">\r\n <div\r\n *ngFor=\"let file of fileItems\"\r\n class=\"mc-file-item\"\r\n [class]=\"file.status ? `mc-file-item--${file.status}` : ''\"\r\n (mouseenter)=\"hoveredFileUid = file.uid\"\r\n (mouseleave)=\"hoveredFileUid = null\"\r\n >\r\n <!-- \u6587\u4EF6\u56FE\u6807\u548C\u8FDB\u5EA6 -->\r\n <div class=\"mc-file-item__icon-container\">\r\n <!-- \u56FE\u7247\u9884\u89C8 -->\r\n <ng-container *ngIf=\"getPreviewType(file) === 'image' && (file['thumbUrl'] || file.url)\">\r\n <img [src]=\"sanitizeUrl(file['thumbUrl'] || file.url)\" [alt]=\"file.name\" class=\"mc-file-item__image-preview\" (click)=\"handlePreview(file)\">\r\n </ng-container>\r\n <!-- \u539F\u6765\u7684\u56FE\u6807 -->\r\n <ng-container *ngIf=\"!(getPreviewType(file) === 'image' && (file['thumbUrl'] || file.url))\">\r\n <mc-file-icon class=\"mc-file-item__icon\" [iconType]=\"getIconComponent(file)\" [size]=\"36\" [title]=\"file.name\"></mc-file-icon>\r\n </ng-container>\r\n <!-- \u8FDB\u5EA6\u8986\u76D6\u5C42 (\u540C\u65F6\u5904\u7406\u4E0A\u4F20\u548C\u4E0B\u8F7D) -->\r\n <div *ngIf=\"file.status === 'uploading' || file.status === 'downloading' || file.status === 'error' || file.status === 'uploadError' || file.status === 'downloadError'\" class=\"mc-file-item__progress-overlay\">\r\n <div class=\"mc-file-item__progress-mask\"></div>\r\n <!-- \u5931\u8D25\u72B6\u6001\uFF1A\u663E\u793A Wrong \u56FE\u6807 -->\r\n <ng-container *ngIf=\"file.status === 'error' || file.status === 'uploadError' || file.status === 'downloadError'\">\r\n <svg class=\"mc-file-item__wrong-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <!-- \u80CC\u666F\u4E09\u89D2 -->\r\n <path \r\n d=\"M7.84 0.99L13.88 12.12C14.13 12.57 13.95 13.14 13.49 13.38C13.35 13.46 13.2 13.5 13.04 13.5H0.95C0.42 13.5 0 13.08 0 12.56C0 12.4 0.03 12.25 0.11 12.12L6.15 0.99C6.4 0.53 6.98 0.36 7.44 0.61C7.61 0.69 7.75 0.83 7.84 0.99Z\" \r\n fill=\"white\"\r\n />\r\n <!-- \u611F\u53F9\u53F7\u7684\u70B9 -->\r\n <path \r\n d=\"M7 11.5C6.58 11.5 6.25 11.16 6.25 10.75C6.25 10.33 6.58 10 7 10C7.41 10 7.75 10.33 7.75 10.75C7.75 11.16 7.41 11.5 7 11.5Z\" \r\n fill=\"#F23030\"\r\n />\r\n <!-- \u611F\u53F9\u53F7\u7684\u7AD6\u7EBF -->\r\n <rect \r\n x=\"6.5\" \r\n y=\"4.5\" \r\n width=\"1\" \r\n height=\"4.5\" \r\n rx=\"0.5\" \r\n fill=\"#F23030\"\r\n />\r\n </svg>\r\n </ng-container>\r\n <ng-container *ngIf=\"file.status === 'uploading' || file.status === 'downloading'\">\r\n <svg class=\"mc-file-item__progress-ring\" viewBox=\"0 0 36 36\">\r\n <path class=\"mc-file-item__progress-ring-track\" d=\"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\" />\r\n <path\r\n class=\"mc-file-item__progress-ring-circle\"\r\n stroke-dasharray=\"100, 100\"\r\n [style.strokeDashoffset]=\"100 - (file.percentage || 0)\"\r\n d=\"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\"\r\n />\r\n </svg>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- \u6587\u4EF6\u4FE1\u606F -->\r\n <div class=\"mc-file-item__info\">\r\n <div class=\"mc-file-item__name\" [title]=\"file.name\">{{ file.name }}</div>\r\n <div class=\"mc-file-item__meta\">\r\n <!-- 1. \u5931\u8D25\u72B6\u6001 (\u7EDF\u4E00\u5904\u7406\u4E0A\u4F20\u548C\u4E0B\u8F7D\u5931\u8D25) -->\r\n <ng-container *ngIf=\"file.status === 'error' || file.status === 'uploadError' || file.status === 'downloadError'\">\r\n <span \r\n class=\"mc-file-item__status mc-file-item__status--error\" \r\n [title]=\"typeof file.error === 'string' ? file.error : (file.status === 'downloadError' ? t('FileList.downloadFailed') : t('FileList.uploadFailed'))\"\r\n >\r\n {{ file.status === 'downloadError' ? t('FileList.downloadFailed') : t('FileList.uploadFailed') }}\r\n </span>\r\n <span\r\n class=\"mc-file-item__meta-action\"\r\n (click)=\"file.status === 'downloadError' ? handleRetryDownload(file) : handleRetryUpload(file)\"\r\n >{{ t('FileList.retry') }}</span>\r\n </ng-container>\r\n <!-- 2. \u60AC\u505C\u72B6\u6001 -->\r\n <ng-container *ngIf=\"hoveredFileUid === file.uid && file.status === 'success'\">\r\n <span class=\"mc-file-item__meta-action\" (click)=\"handleDownload(file, $event)\">{{ t('FileList.download') }}</span>\r\n <span class=\"mc-file-item__meta-action\" (click)=\"handlePreview(file)\">{{ t('FileList.preview') }}</span>\r\n </ng-container>\r\n <!-- 3. \u4E0A\u4F20/\u4E0B\u8F7D\u4E2D\u72B6\u6001 -->\r\n <ng-container *ngIf=\"file.status === 'uploading' || file.status === 'downloading'\">\r\n <span class=\"mc-file-item__status\">{{ t(`FileList.${file.status}`) }}</span>\r\n </ng-container>\r\n <!-- 4. \u9ED8\u8BA4\u72B6\u6001 -->\r\n <ng-container *ngIf=\"!file.status || file.status === 'success' && hoveredFileUid !== file.uid\">\r\n <span class=\"mc-file-item__file-type\">{{ getFileTypeString(file.name) }}</span>\r\n <span class=\"mc-file-item__size\">{{ formatFileSize(file.size) }}</span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <!-- \u5220\u9664\u6309\u94AE -->\r\n <div class=\"mc-file-item__actions\" *ngIf=\"context === 'input'\">\r\n <!-- \u5220\u9664\u6309\u94AE -->\r\n <button (click)=\"handleRemove(file)\" class=\"mc-file-item__action-btn mc-file-item__action-btn--remove\" [title]=\"t('FileList.remove')\">\r\n X\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- \u4F7F\u7528 mc-teleport \u7EC4\u4EF6\u52A0\u8F7D\u6587\u4EF6\u9884\u89C8 -->\r\n <mc-teleport [to]=\"'body'\">\r\n <div *ngIf=\"isPreviewVisible && previewFile\" class=\"mc-file-preview__overlay\" (click.self)=\"closePreview()\">\r\n <!-- \u56FE\u7247\u9884\u89C8 -->\r\n <img *ngIf=\"getPreviewType(previewFile) === 'image'\" [src]=\"sanitizeUrl(previewFile?.['thumbUrl'] || previewFile?.url)\" [alt]=\"previewFile?.name\" class=\"mc-file-preview__content\" />\r\n <!-- \u89C6\u9891\u9884\u89C8 -->\r\n <video *ngIf=\"getPreviewType(previewFile) === 'video'\" [src]=\"sanitizeUrl(previewFile?.url)\" controls class=\"mc-file-preview__content\"></video>\r\n <!-- PDF \u548C \u6587\u672C\u6587\u4EF6\u9884\u89C8 (\u4F7F\u7528 iframe) -->\r\n <iframe *ngIf=\"getPreviewType(previewFile) === 'iframe'\" [src]=\"sanitizeUrl(previewFile?.url)\" class=\"mc-file-preview__content mc-file-preview__iframe\"></iframe>\r\n <!-- \u5176\u4ED6\u6587\u4EF6\u7C7B\u578B\u7684\u5360\u4F4D\u7B26 -->\r\n <div *ngIf=\"getPreviewType(previewFile) === 'unsupported'\" class=\"mc-file-preview__unsupported\">\r\n <span>{{ t('FileList.unsupportedPreview', { fileName: previewFileName }) }}</span>\r\n <span class=\"mc-file-preview__unsupported-tip\">{{ t('FileList.tryDownload') }}</span>\r\n </div>\r\n <!-- \u5173\u95ED\u6309\u94AE -->\r\n <button class=\"mc-file-preview__close-btn\" (click)=\"closePreview()\" [title]=\"t('FileList.close')\">\u2715</button>\r\n </div>\r\n </mc-teleport>\r\n</div>", styles: [".mc-file-list{background-color:var(--devui-base-bg, #ffffff);padding:0 10px}.mc-file-list--context-input{position:relative;padding-bottom:5px}.mc-file-list--context-input .mc-file-list__container{overflow-y:auto}.mc-file-list--context-input:after{content:\"\";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:97%;height:1px;background-color:var(--devui-dividing-line, #f2f2f3)}.mc-file-list--context-dialog{padding:0 10px}.mc-file-list--context-dialog .mc-file-list__container{max-width:606px;max-height:none;overflow-y:visible}.mc-file-list--context-dialog .mc-file-item{border-color:var(--devui-line, #d7d8da)}.mc-file-list--context-dialog .mc-file-item--downloadError,.mc-file-list--context-dialog .mc-file-item--downloading{background-color:var(--devui-base-bg, #ffffff)}.mc-file-list__container{display:flex;padding:2px 0;flex-wrap:wrap}.mc-file-list__container::-webkit-scrollbar{width:4px}.mc-file-list__container::-webkit-scrollbar-track{background:var(--devui-global-bg, #f6f6f8)}.mc-file-list__container::-webkit-scrollbar-thumb{background:var(--devui-disabled-bg, #f5f5f5);border-radius:2px}.mc-file-item{position:relative;width:192px;height:58px;margin:5px;display:flex;align-items:center;padding:4px 8px;border:1px solid var(--devui-line, #d7d8da);transition:all .3s ease;border-radius:var(--devui-border-radius-card, 6px)}.mc-file-item:hover .mc-file-item__actions{opacity:1}.mc-file-item__image-preview{width:36px;height:36px;object-fit:cover;border-radius:var(--devui-border-radius, 2px);cursor:pointer}.mc-file-item--success,.mc-file-item--uploadError,.mc-file-item--downloadError{background-color:var(--devui-base-bg, #ffffff)}.mc-file-item__icon-container{margin-right:10px;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;width:36px;height:36px}.mc-file-item__icon{position:relative;display:flex;align-items:center;justify-content:center}.mc-file-item__type-icon{display:inline-block}.mc-file-item__info{flex:1;min-width:0}.mc-file-item__name{font-size:var(--devui-font-size-sm, 12px);color:var(--devui-text, #252b3a);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-file-item__meta{display:flex;align-items:center;font-size:var(--devui-font-size-sm, 12px);color:var(--devui-aide-text, #71757f);gap:8px}.mc-file-item__meta-action{color:var(--devui-link, #526ecc);cursor:pointer}.mc-file-item__size{color:var(--devui-aide-text, #71757f)}.mc-file-item__status--error{color:var(--devui-danger, #f66f6a)}.mc-file-item__progress-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:7px;overflow:hidden}.mc-file-item__progress-mask{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0006}.mc-file-item__wrong-icon{position:relative;z-index:999}.mc-file-item__progress-ring{position:relative;width:17.5px;height:17.5px}.mc-file-item__progress-ring-track,.mc-file-item__progress-ring-circle{fill:transparent;stroke-width:5}.mc-file-item__progress-ring-track{stroke:var(--devui-disabled-bg, #f5f5f5);stroke-opacity:.3}.mc-file-item__progress-ring-circle{stroke:var(--devui-base-bg, #ffffff);stroke-linecap:round;transition:stroke-dashoffset .3s}.mc-file-item__actions{position:absolute;top:-6px;right:-6px;opacity:0;display:flex;align-items:center;justify-content:center;transition:opacity .3s ease}.mc-file-item__action-btn{border:none;background:#c2c2c2;cursor:pointer;border-radius:50%;font-size:8px;width:12px;height:12px;line-height:11px;padding:0;transition:all .3s ease}.mc-file-item__action-btn--remove{color:var(--devui-light-text, #ffffff)}.mc-file-preview__overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:2000}.mc-file-preview__content{max-width:90vw;max-height:90vh;object-fit:contain}.mc-file-preview__iframe{width:80vw;height:90vh;border:none}.mc-file-preview__unsupported{padding:40px 60px;background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius, 2px);color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 12px)}.mc-file-preview__close-btn{position:absolute;top:40px;right:40px;width:40px;height:40px;border-radius:50%;background:#1e1e1e80;color:#fff;border:none;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:background-color .2s}.mc-file-preview__close-btn:hover{background:#0009}.mc-file-preview-fade-enter-active,.mc-file-preview-fade-leave-active{transition:opacity .3s ease}.mc-file-preview-fade-enter-from,.mc-file-preview-fade-leave-to{opacity:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: McFileIconComponent, selector: "mc-file-icon", inputs: ["iconType", "size", "title", "customClass"] }, { kind: "component", type: McTeleportComponent, selector: "mc-teleport", inputs: ["to"] }] }); }
|
|
1521
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: McFileListComponent, isStandalone: true, selector: "mc-file-list", inputs: { fileItems: "fileItems", context: "context" }, outputs: { remove: "remove", retryUpload: "retryUpload", download: "download", preview: "preview", retryDownload: "retryDownload" }, host: { listeners: { "document:keydown": "handleKeyDown($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"mc-file-list\" [class]=\"`mc-file-list--context-${context}`\">\r\n <div class=\"mc-file-list__container\">\r\n <div\r\n *ngFor=\"let file of fileItems\"\r\n class=\"mc-file-item\"\r\n [class]=\"file.status ? `mc-file-item--${file.status}` : ''\"\r\n (mouseenter)=\"hoveredFileUid = file.uid\"\r\n (mouseleave)=\"hoveredFileUid = null\"\r\n >\r\n <!-- \u6587\u4EF6\u56FE\u6807\u548C\u8FDB\u5EA6 -->\r\n <div class=\"mc-file-item__icon-container\">\r\n <!-- \u56FE\u7247\u9884\u89C8 -->\r\n <ng-container *ngIf=\"getPreviewType(file) === 'image' && (file['thumbUrl'] || file.url)\">\r\n <img [src]=\"sanitizeUrl(file['thumbUrl'] || file.url)\" [alt]=\"file.name\" class=\"mc-file-item__image-preview\" (click)=\"handlePreview(file)\">\r\n </ng-container>\r\n <!-- \u539F\u6765\u7684\u56FE\u6807 -->\r\n <ng-container *ngIf=\"!(getPreviewType(file) === 'image' && (file['thumbUrl'] || file.url))\">\r\n <mc-file-icon class=\"mc-file-item__icon\" [iconType]=\"getIconComponent(file)\" [size]=\"36\" [title]=\"file.name\"></mc-file-icon>\r\n </ng-container>\r\n <!-- \u8FDB\u5EA6\u8986\u76D6\u5C42 (\u540C\u65F6\u5904\u7406\u4E0A\u4F20\u548C\u4E0B\u8F7D) -->\r\n <div *ngIf=\"file.status === 'uploading' || file.status === 'downloading' || file.status === 'error' || file.status === 'uploadError' || file.status === 'downloadError'\" class=\"mc-file-item__progress-overlay\">\r\n <div class=\"mc-file-item__progress-mask\"></div>\r\n <!-- \u5931\u8D25\u72B6\u6001\uFF1A\u663E\u793A Wrong \u56FE\u6807 -->\r\n <ng-container *ngIf=\"file.status === 'error' || file.status === 'uploadError' || file.status === 'downloadError'\">\r\n <svg class=\"mc-file-item__wrong-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <!-- \u80CC\u666F\u4E09\u89D2 -->\r\n <path \r\n d=\"M7.84 0.99L13.88 12.12C14.13 12.57 13.95 13.14 13.49 13.38C13.35 13.46 13.2 13.5 13.04 13.5H0.95C0.42 13.5 0 13.08 0 12.56C0 12.4 0.03 12.25 0.11 12.12L6.15 0.99C6.4 0.53 6.98 0.36 7.44 0.61C7.61 0.69 7.75 0.83 7.84 0.99Z\" \r\n fill=\"white\"\r\n />\r\n <!-- \u611F\u53F9\u53F7\u7684\u70B9 -->\r\n <path \r\n d=\"M7 11.5C6.58 11.5 6.25 11.16 6.25 10.75C6.25 10.33 6.58 10 7 10C7.41 10 7.75 10.33 7.75 10.75C7.75 11.16 7.41 11.5 7 11.5Z\" \r\n fill=\"#F23030\"\r\n />\r\n <!-- \u611F\u53F9\u53F7\u7684\u7AD6\u7EBF -->\r\n <rect \r\n x=\"6.5\" \r\n y=\"4.5\" \r\n width=\"1\" \r\n height=\"4.5\" \r\n rx=\"0.5\" \r\n fill=\"#F23030\"\r\n />\r\n </svg>\r\n </ng-container>\r\n <ng-container *ngIf=\"file.status === 'uploading' || file.status === 'downloading'\">\r\n <svg class=\"mc-file-item__progress-ring\" viewBox=\"0 0 36 36\">\r\n <path class=\"mc-file-item__progress-ring-track\" d=\"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\" />\r\n <path\r\n class=\"mc-file-item__progress-ring-circle\"\r\n stroke-dasharray=\"100, 100\"\r\n [style.strokeDashoffset]=\"100 - (file.percentage || 0)\"\r\n d=\"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\"\r\n />\r\n </svg>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- \u6587\u4EF6\u4FE1\u606F -->\r\n <div class=\"mc-file-item__info\">\r\n <div class=\"mc-file-item__name\" [title]=\"file.name\">{{ file.name }}</div>\r\n <div class=\"mc-file-item__meta\">\r\n <!-- 1. \u5931\u8D25\u72B6\u6001 (\u7EDF\u4E00\u5904\u7406\u4E0A\u4F20\u548C\u4E0B\u8F7D\u5931\u8D25) -->\r\n <ng-container *ngIf=\"file.status === 'error' || file.status === 'uploadError' || file.status === 'downloadError'\">\r\n <span \r\n class=\"mc-file-item__status mc-file-item__status--error\" \r\n [title]=\"typeof file.error === 'string' ? file.error : (file.status === 'downloadError' ? t('FileList.downloadFailed') : t('FileList.uploadFailed'))\"\r\n >\r\n {{ file.status === 'downloadError' ? t('FileList.downloadFailed') : t('FileList.uploadFailed') }}\r\n </span>\r\n <span\r\n class=\"mc-file-item__meta-action\"\r\n (click)=\"file.status === 'downloadError' ? handleRetryDownload(file) : handleRetryUpload(file)\"\r\n >{{ t('FileList.retry') }}</span>\r\n </ng-container>\r\n <!-- 2. \u60AC\u505C\u72B6\u6001 -->\r\n <ng-container *ngIf=\"hoveredFileUid === file.uid && file.status === 'success'\">\r\n <span class=\"mc-file-item__meta-action\" (click)=\"handleDownload(file, $event)\">{{ t('FileList.download') }}</span>\r\n <span class=\"mc-file-item__meta-action\" (click)=\"handlePreview(file)\">{{ t('FileList.preview') }}</span>\r\n </ng-container>\r\n <!-- 3. \u4E0A\u4F20/\u4E0B\u8F7D\u4E2D\u72B6\u6001 -->\r\n <ng-container *ngIf=\"file.status === 'uploading' || file.status === 'downloading'\">\r\n <span class=\"mc-file-item__status\">{{ t(`FileList.${file.status}`) }}</span>\r\n </ng-container>\r\n <!-- 4. \u9ED8\u8BA4\u72B6\u6001 -->\r\n <ng-container *ngIf=\"!file.status || file.status === 'success' && hoveredFileUid !== file.uid\">\r\n <span class=\"mc-file-item__file-type\">{{ getFileTypeString(file.name) }}</span>\r\n <span class=\"mc-file-item__size\">{{ formatFileSize(file.size) }}</span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <!-- \u5220\u9664\u6309\u94AE -->\r\n <div class=\"mc-file-item__actions\" *ngIf=\"context === 'input'\">\r\n <!-- \u5220\u9664\u6309\u94AE -->\r\n <button (click)=\"handleRemove(file)\" class=\"mc-file-item__action-btn mc-file-item__action-btn--remove\" [title]=\"t('FileList.remove')\">\r\n X\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- \u4F7F\u7528 mc-teleport \u7EC4\u4EF6\u52A0\u8F7D\u6587\u4EF6\u9884\u89C8 -->\r\n <mc-teleport [to]=\"'body'\">\r\n <div *ngIf=\"isPreviewVisible && previewFile\" class=\"mc-file-preview__overlay\" (click.self)=\"closePreview()\">\r\n <!-- \u56FE\u7247\u9884\u89C8 -->\r\n <img *ngIf=\"getPreviewType(previewFile) === 'image'\" [src]=\"sanitizeUrl(previewFile?.['thumbUrl'] || previewFile?.url)\" [alt]=\"previewFile?.name\" class=\"mc-file-preview__content\" />\r\n <!-- \u89C6\u9891\u9884\u89C8 -->\r\n <video *ngIf=\"getPreviewType(previewFile) === 'video'\" [src]=\"sanitizeUrl(previewFile?.url)\" controls class=\"mc-file-preview__content\"></video>\r\n <!-- PDF \u548C \u6587\u672C\u6587\u4EF6\u9884\u89C8 (\u4F7F\u7528 iframe) -->\r\n <iframe *ngIf=\"getPreviewType(previewFile) === 'iframe'\" [src]=\"sanitizeUrl(previewFile?.url)\" class=\"mc-file-preview__content mc-file-preview__iframe\"></iframe>\r\n <!-- \u5176\u4ED6\u6587\u4EF6\u7C7B\u578B\u7684\u5360\u4F4D\u7B26 -->\r\n <div *ngIf=\"getPreviewType(previewFile) === 'unsupported'\" class=\"mc-file-preview__unsupported\">\r\n <span>{{ t('FileList.unsupportedPreview', { fileName: previewFileName }) }}</span>\r\n <span class=\"mc-file-preview__unsupported-tip\">{{ t('FileList.tryDownload') }}</span>\r\n </div>\r\n <!-- \u5173\u95ED\u6309\u94AE -->\r\n <button class=\"mc-file-preview__close-btn\" (click)=\"closePreview()\" [title]=\"t('FileList.close')\">\u2715</button>\r\n </div>\r\n </mc-teleport>\r\n</div>", styles: [".mc-file-list{background-color:var(--devui-base-bg, #ffffff);padding:0 10px}.mc-file-list--context-input{position:relative;padding-bottom:5px}.mc-file-list--context-input .mc-file-list__container{overflow-y:auto}.mc-file-list--context-input:after{content:\"\";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:97%;height:1px;background-color:var(--devui-dividing-line, #f2f2f3)}.mc-file-list--context-dialog{padding:0 10px}.mc-file-list--context-dialog .mc-file-list__container{max-height:none;overflow-y:visible}.mc-file-list--context-dialog .mc-file-item{border-color:var(--devui-line, #d7d8da)}.mc-file-list--context-dialog .mc-file-item--downloadError,.mc-file-list--context-dialog .mc-file-item--downloading{background-color:var(--devui-base-bg, #ffffff)}.mc-file-list__container{display:flex;padding:2px 0;flex-wrap:wrap}.mc-file-list__container::-webkit-scrollbar{width:4px}.mc-file-list__container::-webkit-scrollbar-track{background:var(--devui-global-bg, #f6f6f8)}.mc-file-list__container::-webkit-scrollbar-thumb{background:var(--devui-disabled-bg, #f5f5f5);border-radius:2px}.mc-file-item{position:relative;width:192px;height:58px;margin:5px;display:flex;align-items:center;padding:4px 8px;border:1px solid var(--devui-line, #d7d8da);transition:all .3s ease;border-radius:var(--devui-border-radius-card, 6px)}.mc-file-item:hover .mc-file-item__actions{opacity:1}.mc-file-item__image-preview{width:36px;height:36px;object-fit:cover;border-radius:var(--devui-border-radius, 2px);cursor:pointer}.mc-file-item--success,.mc-file-item--uploadError,.mc-file-item--downloadError{background-color:var(--devui-base-bg, #ffffff)}.mc-file-item__icon-container{margin-right:10px;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;width:36px;height:36px}.mc-file-item__icon{position:relative;display:flex;align-items:center;justify-content:center}.mc-file-item__type-icon{display:inline-block}.mc-file-item__info{flex:1;min-width:0}.mc-file-item__name{font-size:var(--devui-font-size-sm, 12px);color:var(--devui-text, #252b3a);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-file-item__meta{display:flex;align-items:center;font-size:var(--devui-font-size-sm, 12px);color:var(--devui-aide-text, #71757f);gap:8px}.mc-file-item__meta-action{color:var(--devui-link, #526ecc);cursor:pointer}.mc-file-item__size{color:var(--devui-aide-text, #71757f)}.mc-file-item__status--error{color:var(--devui-danger, #f66f6a)}.mc-file-item__progress-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:7px;overflow:hidden}.mc-file-item__progress-mask{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0006}.mc-file-item__wrong-icon{position:relative;z-index:999}.mc-file-item__progress-ring{position:relative;width:17.5px;height:17.5px}.mc-file-item__progress-ring-track,.mc-file-item__progress-ring-circle{fill:transparent;stroke-width:5}.mc-file-item__progress-ring-track{stroke:var(--devui-disabled-bg, #f5f5f5);stroke-opacity:.3}.mc-file-item__progress-ring-circle{stroke:var(--devui-base-bg, #ffffff);stroke-linecap:round;transition:stroke-dashoffset .3s}.mc-file-item__actions{position:absolute;top:-6px;right:-6px;opacity:0;display:flex;align-items:center;justify-content:center;transition:opacity .3s ease}.mc-file-item__action-btn{border:none;background:#c2c2c2;cursor:pointer;border-radius:50%;font-size:8px;width:12px;height:12px;line-height:11px;padding:0;transition:all .3s ease}.mc-file-item__action-btn--remove{color:var(--devui-light-text, #ffffff)}.mc-file-preview__overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:2000}.mc-file-preview__content{max-width:90vw;max-height:90vh;object-fit:contain}.mc-file-preview__iframe{width:80vw;height:90vh;border:none}.mc-file-preview__unsupported{padding:40px 60px;background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius, 2px);color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 12px)}.mc-file-preview__close-btn{position:absolute;top:40px;right:40px;width:40px;height:40px;border-radius:50%;background:#1e1e1e80;color:#fff;border:none;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:background-color .2s}.mc-file-preview__close-btn:hover{background:#0009}.mc-file-preview-fade-enter-active,.mc-file-preview-fade-leave-active{transition:opacity .3s ease}.mc-file-preview-fade-enter-from,.mc-file-preview-fade-leave-to{opacity:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: McFileIconComponent, selector: "mc-file-icon", inputs: ["iconType", "size", "title", "customClass"] }, { kind: "component", type: McTeleportComponent, selector: "mc-teleport", inputs: ["to"] }] }); }
|
|
1522
1522
|
}
|
|
1523
1523
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: McFileListComponent, decorators: [{
|
|
1524
1524
|
type: Component,
|
|
1525
|
-
args: [{ selector: 'mc-file-list', standalone: true, imports: [CommonModule, McFileIconComponent, McTeleportComponent], template: "<div class=\"mc-file-list\" [class]=\"`mc-file-list--context-${context}`\">\r\n <div class=\"mc-file-list__container\">\r\n <div\r\n *ngFor=\"let file of fileItems\"\r\n class=\"mc-file-item\"\r\n [class]=\"file.status ? `mc-file-item--${file.status}` : ''\"\r\n (mouseenter)=\"hoveredFileUid = file.uid\"\r\n (mouseleave)=\"hoveredFileUid = null\"\r\n >\r\n <!-- \u6587\u4EF6\u56FE\u6807\u548C\u8FDB\u5EA6 -->\r\n <div class=\"mc-file-item__icon-container\">\r\n <!-- \u56FE\u7247\u9884\u89C8 -->\r\n <ng-container *ngIf=\"getPreviewType(file) === 'image' && (file['thumbUrl'] || file.url)\">\r\n <img [src]=\"sanitizeUrl(file['thumbUrl'] || file.url)\" [alt]=\"file.name\" class=\"mc-file-item__image-preview\" (click)=\"handlePreview(file)\">\r\n </ng-container>\r\n <!-- \u539F\u6765\u7684\u56FE\u6807 -->\r\n <ng-container *ngIf=\"!(getPreviewType(file) === 'image' && (file['thumbUrl'] || file.url))\">\r\n <mc-file-icon class=\"mc-file-item__icon\" [iconType]=\"getIconComponent(file)\" [size]=\"36\" [title]=\"file.name\"></mc-file-icon>\r\n </ng-container>\r\n <!-- \u8FDB\u5EA6\u8986\u76D6\u5C42 (\u540C\u65F6\u5904\u7406\u4E0A\u4F20\u548C\u4E0B\u8F7D) -->\r\n <div *ngIf=\"file.status === 'uploading' || file.status === 'downloading' || file.status === 'error' || file.status === 'uploadError' || file.status === 'downloadError'\" class=\"mc-file-item__progress-overlay\">\r\n <div class=\"mc-file-item__progress-mask\"></div>\r\n <!-- \u5931\u8D25\u72B6\u6001\uFF1A\u663E\u793A Wrong \u56FE\u6807 -->\r\n <ng-container *ngIf=\"file.status === 'error' || file.status === 'uploadError' || file.status === 'downloadError'\">\r\n <svg class=\"mc-file-item__wrong-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <!-- \u80CC\u666F\u4E09\u89D2 -->\r\n <path \r\n d=\"M7.84 0.99L13.88 12.12C14.13 12.57 13.95 13.14 13.49 13.38C13.35 13.46 13.2 13.5 13.04 13.5H0.95C0.42 13.5 0 13.08 0 12.56C0 12.4 0.03 12.25 0.11 12.12L6.15 0.99C6.4 0.53 6.98 0.36 7.44 0.61C7.61 0.69 7.75 0.83 7.84 0.99Z\" \r\n fill=\"white\"\r\n />\r\n <!-- \u611F\u53F9\u53F7\u7684\u70B9 -->\r\n <path \r\n d=\"M7 11.5C6.58 11.5 6.25 11.16 6.25 10.75C6.25 10.33 6.58 10 7 10C7.41 10 7.75 10.33 7.75 10.75C7.75 11.16 7.41 11.5 7 11.5Z\" \r\n fill=\"#F23030\"\r\n />\r\n <!-- \u611F\u53F9\u53F7\u7684\u7AD6\u7EBF -->\r\n <rect \r\n x=\"6.5\" \r\n y=\"4.5\" \r\n width=\"1\" \r\n height=\"4.5\" \r\n rx=\"0.5\" \r\n fill=\"#F23030\"\r\n />\r\n </svg>\r\n </ng-container>\r\n <ng-container *ngIf=\"file.status === 'uploading' || file.status === 'downloading'\">\r\n <svg class=\"mc-file-item__progress-ring\" viewBox=\"0 0 36 36\">\r\n <path class=\"mc-file-item__progress-ring-track\" d=\"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\" />\r\n <path\r\n class=\"mc-file-item__progress-ring-circle\"\r\n stroke-dasharray=\"100, 100\"\r\n [style.strokeDashoffset]=\"100 - (file.percentage || 0)\"\r\n d=\"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\"\r\n />\r\n </svg>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- \u6587\u4EF6\u4FE1\u606F -->\r\n <div class=\"mc-file-item__info\">\r\n <div class=\"mc-file-item__name\" [title]=\"file.name\">{{ file.name }}</div>\r\n <div class=\"mc-file-item__meta\">\r\n <!-- 1. \u5931\u8D25\u72B6\u6001 (\u7EDF\u4E00\u5904\u7406\u4E0A\u4F20\u548C\u4E0B\u8F7D\u5931\u8D25) -->\r\n <ng-container *ngIf=\"file.status === 'error' || file.status === 'uploadError' || file.status === 'downloadError'\">\r\n <span \r\n class=\"mc-file-item__status mc-file-item__status--error\" \r\n [title]=\"typeof file.error === 'string' ? file.error : (file.status === 'downloadError' ? t('FileList.downloadFailed') : t('FileList.uploadFailed'))\"\r\n >\r\n {{ file.status === 'downloadError' ? t('FileList.downloadFailed') : t('FileList.uploadFailed') }}\r\n </span>\r\n <span\r\n class=\"mc-file-item__meta-action\"\r\n (click)=\"file.status === 'downloadError' ? handleRetryDownload(file) : handleRetryUpload(file)\"\r\n >{{ t('FileList.retry') }}</span>\r\n </ng-container>\r\n <!-- 2. \u60AC\u505C\u72B6\u6001 -->\r\n <ng-container *ngIf=\"hoveredFileUid === file.uid && file.status === 'success'\">\r\n <span class=\"mc-file-item__meta-action\" (click)=\"handleDownload(file, $event)\">{{ t('FileList.download') }}</span>\r\n <span class=\"mc-file-item__meta-action\" (click)=\"handlePreview(file)\">{{ t('FileList.preview') }}</span>\r\n </ng-container>\r\n <!-- 3. \u4E0A\u4F20/\u4E0B\u8F7D\u4E2D\u72B6\u6001 -->\r\n <ng-container *ngIf=\"file.status === 'uploading' || file.status === 'downloading'\">\r\n <span class=\"mc-file-item__status\">{{ t(`FileList.${file.status}`) }}</span>\r\n </ng-container>\r\n <!-- 4. \u9ED8\u8BA4\u72B6\u6001 -->\r\n <ng-container *ngIf=\"!file.status || file.status === 'success' && hoveredFileUid !== file.uid\">\r\n <span class=\"mc-file-item__file-type\">{{ getFileTypeString(file.name) }}</span>\r\n <span class=\"mc-file-item__size\">{{ formatFileSize(file.size) }}</span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <!-- \u5220\u9664\u6309\u94AE -->\r\n <div class=\"mc-file-item__actions\" *ngIf=\"context === 'input'\">\r\n <!-- \u5220\u9664\u6309\u94AE -->\r\n <button (click)=\"handleRemove(file)\" class=\"mc-file-item__action-btn mc-file-item__action-btn--remove\" [title]=\"t('FileList.remove')\">\r\n X\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- \u4F7F\u7528 mc-teleport \u7EC4\u4EF6\u52A0\u8F7D\u6587\u4EF6\u9884\u89C8 -->\r\n <mc-teleport [to]=\"'body'\">\r\n <div *ngIf=\"isPreviewVisible && previewFile\" class=\"mc-file-preview__overlay\" (click.self)=\"closePreview()\">\r\n <!-- \u56FE\u7247\u9884\u89C8 -->\r\n <img *ngIf=\"getPreviewType(previewFile) === 'image'\" [src]=\"sanitizeUrl(previewFile?.['thumbUrl'] || previewFile?.url)\" [alt]=\"previewFile?.name\" class=\"mc-file-preview__content\" />\r\n <!-- \u89C6\u9891\u9884\u89C8 -->\r\n <video *ngIf=\"getPreviewType(previewFile) === 'video'\" [src]=\"sanitizeUrl(previewFile?.url)\" controls class=\"mc-file-preview__content\"></video>\r\n <!-- PDF \u548C \u6587\u672C\u6587\u4EF6\u9884\u89C8 (\u4F7F\u7528 iframe) -->\r\n <iframe *ngIf=\"getPreviewType(previewFile) === 'iframe'\" [src]=\"sanitizeUrl(previewFile?.url)\" class=\"mc-file-preview__content mc-file-preview__iframe\"></iframe>\r\n <!-- \u5176\u4ED6\u6587\u4EF6\u7C7B\u578B\u7684\u5360\u4F4D\u7B26 -->\r\n <div *ngIf=\"getPreviewType(previewFile) === 'unsupported'\" class=\"mc-file-preview__unsupported\">\r\n <span>{{ t('FileList.unsupportedPreview', { fileName: previewFileName }) }}</span>\r\n <span class=\"mc-file-preview__unsupported-tip\">{{ t('FileList.tryDownload') }}</span>\r\n </div>\r\n <!-- \u5173\u95ED\u6309\u94AE -->\r\n <button class=\"mc-file-preview__close-btn\" (click)=\"closePreview()\" [title]=\"t('FileList.close')\">\u2715</button>\r\n </div>\r\n </mc-teleport>\r\n</div>", styles: [".mc-file-list{background-color:var(--devui-base-bg, #ffffff);padding:0 10px}.mc-file-list--context-input{position:relative;padding-bottom:5px}.mc-file-list--context-input .mc-file-list__container{overflow-y:auto}.mc-file-list--context-input:after{content:\"\";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:97%;height:1px;background-color:var(--devui-dividing-line, #f2f2f3)}.mc-file-list--context-dialog{padding:0 10px}.mc-file-list--context-dialog .mc-file-list__container{max-width:606px;max-height:none;overflow-y:visible}.mc-file-list--context-dialog .mc-file-item{border-color:var(--devui-line, #d7d8da)}.mc-file-list--context-dialog .mc-file-item--downloadError,.mc-file-list--context-dialog .mc-file-item--downloading{background-color:var(--devui-base-bg, #ffffff)}.mc-file-list__container{display:flex;padding:2px 0;flex-wrap:wrap}.mc-file-list__container::-webkit-scrollbar{width:4px}.mc-file-list__container::-webkit-scrollbar-track{background:var(--devui-global-bg, #f6f6f8)}.mc-file-list__container::-webkit-scrollbar-thumb{background:var(--devui-disabled-bg, #f5f5f5);border-radius:2px}.mc-file-item{position:relative;width:192px;height:58px;margin:5px;display:flex;align-items:center;padding:4px 8px;border:1px solid var(--devui-line, #d7d8da);transition:all .3s ease;border-radius:var(--devui-border-radius-card, 6px)}.mc-file-item:hover .mc-file-item__actions{opacity:1}.mc-file-item__image-preview{width:36px;height:36px;object-fit:cover;border-radius:var(--devui-border-radius, 2px);cursor:pointer}.mc-file-item--success,.mc-file-item--uploadError,.mc-file-item--downloadError{background-color:var(--devui-base-bg, #ffffff)}.mc-file-item__icon-container{margin-right:10px;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;width:36px;height:36px}.mc-file-item__icon{position:relative;display:flex;align-items:center;justify-content:center}.mc-file-item__type-icon{display:inline-block}.mc-file-item__info{flex:1;min-width:0}.mc-file-item__name{font-size:var(--devui-font-size-sm, 12px);color:var(--devui-text, #252b3a);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-file-item__meta{display:flex;align-items:center;font-size:var(--devui-font-size-sm, 12px);color:var(--devui-aide-text, #71757f);gap:8px}.mc-file-item__meta-action{color:var(--devui-link, #526ecc);cursor:pointer}.mc-file-item__size{color:var(--devui-aide-text, #71757f)}.mc-file-item__status--error{color:var(--devui-danger, #f66f6a)}.mc-file-item__progress-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:7px;overflow:hidden}.mc-file-item__progress-mask{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0006}.mc-file-item__wrong-icon{position:relative;z-index:999}.mc-file-item__progress-ring{position:relative;width:17.5px;height:17.5px}.mc-file-item__progress-ring-track,.mc-file-item__progress-ring-circle{fill:transparent;stroke-width:5}.mc-file-item__progress-ring-track{stroke:var(--devui-disabled-bg, #f5f5f5);stroke-opacity:.3}.mc-file-item__progress-ring-circle{stroke:var(--devui-base-bg, #ffffff);stroke-linecap:round;transition:stroke-dashoffset .3s}.mc-file-item__actions{position:absolute;top:-6px;right:-6px;opacity:0;display:flex;align-items:center;justify-content:center;transition:opacity .3s ease}.mc-file-item__action-btn{border:none;background:#c2c2c2;cursor:pointer;border-radius:50%;font-size:8px;width:12px;height:12px;line-height:11px;padding:0;transition:all .3s ease}.mc-file-item__action-btn--remove{color:var(--devui-light-text, #ffffff)}.mc-file-preview__overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:2000}.mc-file-preview__content{max-width:90vw;max-height:90vh;object-fit:contain}.mc-file-preview__iframe{width:80vw;height:90vh;border:none}.mc-file-preview__unsupported{padding:40px 60px;background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius, 2px);color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 12px)}.mc-file-preview__close-btn{position:absolute;top:40px;right:40px;width:40px;height:40px;border-radius:50%;background:#1e1e1e80;color:#fff;border:none;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:background-color .2s}.mc-file-preview__close-btn:hover{background:#0009}.mc-file-preview-fade-enter-active,.mc-file-preview-fade-leave-active{transition:opacity .3s ease}.mc-file-preview-fade-enter-from,.mc-file-preview-fade-leave-to{opacity:0}\n"] }]
|
|
1525
|
+
args: [{ selector: 'mc-file-list', standalone: true, imports: [CommonModule, McFileIconComponent, McTeleportComponent], template: "<div class=\"mc-file-list\" [class]=\"`mc-file-list--context-${context}`\">\r\n <div class=\"mc-file-list__container\">\r\n <div\r\n *ngFor=\"let file of fileItems\"\r\n class=\"mc-file-item\"\r\n [class]=\"file.status ? `mc-file-item--${file.status}` : ''\"\r\n (mouseenter)=\"hoveredFileUid = file.uid\"\r\n (mouseleave)=\"hoveredFileUid = null\"\r\n >\r\n <!-- \u6587\u4EF6\u56FE\u6807\u548C\u8FDB\u5EA6 -->\r\n <div class=\"mc-file-item__icon-container\">\r\n <!-- \u56FE\u7247\u9884\u89C8 -->\r\n <ng-container *ngIf=\"getPreviewType(file) === 'image' && (file['thumbUrl'] || file.url)\">\r\n <img [src]=\"sanitizeUrl(file['thumbUrl'] || file.url)\" [alt]=\"file.name\" class=\"mc-file-item__image-preview\" (click)=\"handlePreview(file)\">\r\n </ng-container>\r\n <!-- \u539F\u6765\u7684\u56FE\u6807 -->\r\n <ng-container *ngIf=\"!(getPreviewType(file) === 'image' && (file['thumbUrl'] || file.url))\">\r\n <mc-file-icon class=\"mc-file-item__icon\" [iconType]=\"getIconComponent(file)\" [size]=\"36\" [title]=\"file.name\"></mc-file-icon>\r\n </ng-container>\r\n <!-- \u8FDB\u5EA6\u8986\u76D6\u5C42 (\u540C\u65F6\u5904\u7406\u4E0A\u4F20\u548C\u4E0B\u8F7D) -->\r\n <div *ngIf=\"file.status === 'uploading' || file.status === 'downloading' || file.status === 'error' || file.status === 'uploadError' || file.status === 'downloadError'\" class=\"mc-file-item__progress-overlay\">\r\n <div class=\"mc-file-item__progress-mask\"></div>\r\n <!-- \u5931\u8D25\u72B6\u6001\uFF1A\u663E\u793A Wrong \u56FE\u6807 -->\r\n <ng-container *ngIf=\"file.status === 'error' || file.status === 'uploadError' || file.status === 'downloadError'\">\r\n <svg class=\"mc-file-item__wrong-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <!-- \u80CC\u666F\u4E09\u89D2 -->\r\n <path \r\n d=\"M7.84 0.99L13.88 12.12C14.13 12.57 13.95 13.14 13.49 13.38C13.35 13.46 13.2 13.5 13.04 13.5H0.95C0.42 13.5 0 13.08 0 12.56C0 12.4 0.03 12.25 0.11 12.12L6.15 0.99C6.4 0.53 6.98 0.36 7.44 0.61C7.61 0.69 7.75 0.83 7.84 0.99Z\" \r\n fill=\"white\"\r\n />\r\n <!-- \u611F\u53F9\u53F7\u7684\u70B9 -->\r\n <path \r\n d=\"M7 11.5C6.58 11.5 6.25 11.16 6.25 10.75C6.25 10.33 6.58 10 7 10C7.41 10 7.75 10.33 7.75 10.75C7.75 11.16 7.41 11.5 7 11.5Z\" \r\n fill=\"#F23030\"\r\n />\r\n <!-- \u611F\u53F9\u53F7\u7684\u7AD6\u7EBF -->\r\n <rect \r\n x=\"6.5\" \r\n y=\"4.5\" \r\n width=\"1\" \r\n height=\"4.5\" \r\n rx=\"0.5\" \r\n fill=\"#F23030\"\r\n />\r\n </svg>\r\n </ng-container>\r\n <ng-container *ngIf=\"file.status === 'uploading' || file.status === 'downloading'\">\r\n <svg class=\"mc-file-item__progress-ring\" viewBox=\"0 0 36 36\">\r\n <path class=\"mc-file-item__progress-ring-track\" d=\"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\" />\r\n <path\r\n class=\"mc-file-item__progress-ring-circle\"\r\n stroke-dasharray=\"100, 100\"\r\n [style.strokeDashoffset]=\"100 - (file.percentage || 0)\"\r\n d=\"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\"\r\n />\r\n </svg>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- \u6587\u4EF6\u4FE1\u606F -->\r\n <div class=\"mc-file-item__info\">\r\n <div class=\"mc-file-item__name\" [title]=\"file.name\">{{ file.name }}</div>\r\n <div class=\"mc-file-item__meta\">\r\n <!-- 1. \u5931\u8D25\u72B6\u6001 (\u7EDF\u4E00\u5904\u7406\u4E0A\u4F20\u548C\u4E0B\u8F7D\u5931\u8D25) -->\r\n <ng-container *ngIf=\"file.status === 'error' || file.status === 'uploadError' || file.status === 'downloadError'\">\r\n <span \r\n class=\"mc-file-item__status mc-file-item__status--error\" \r\n [title]=\"typeof file.error === 'string' ? file.error : (file.status === 'downloadError' ? t('FileList.downloadFailed') : t('FileList.uploadFailed'))\"\r\n >\r\n {{ file.status === 'downloadError' ? t('FileList.downloadFailed') : t('FileList.uploadFailed') }}\r\n </span>\r\n <span\r\n class=\"mc-file-item__meta-action\"\r\n (click)=\"file.status === 'downloadError' ? handleRetryDownload(file) : handleRetryUpload(file)\"\r\n >{{ t('FileList.retry') }}</span>\r\n </ng-container>\r\n <!-- 2. \u60AC\u505C\u72B6\u6001 -->\r\n <ng-container *ngIf=\"hoveredFileUid === file.uid && file.status === 'success'\">\r\n <span class=\"mc-file-item__meta-action\" (click)=\"handleDownload(file, $event)\">{{ t('FileList.download') }}</span>\r\n <span class=\"mc-file-item__meta-action\" (click)=\"handlePreview(file)\">{{ t('FileList.preview') }}</span>\r\n </ng-container>\r\n <!-- 3. \u4E0A\u4F20/\u4E0B\u8F7D\u4E2D\u72B6\u6001 -->\r\n <ng-container *ngIf=\"file.status === 'uploading' || file.status === 'downloading'\">\r\n <span class=\"mc-file-item__status\">{{ t(`FileList.${file.status}`) }}</span>\r\n </ng-container>\r\n <!-- 4. \u9ED8\u8BA4\u72B6\u6001 -->\r\n <ng-container *ngIf=\"!file.status || file.status === 'success' && hoveredFileUid !== file.uid\">\r\n <span class=\"mc-file-item__file-type\">{{ getFileTypeString(file.name) }}</span>\r\n <span class=\"mc-file-item__size\">{{ formatFileSize(file.size) }}</span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <!-- \u5220\u9664\u6309\u94AE -->\r\n <div class=\"mc-file-item__actions\" *ngIf=\"context === 'input'\">\r\n <!-- \u5220\u9664\u6309\u94AE -->\r\n <button (click)=\"handleRemove(file)\" class=\"mc-file-item__action-btn mc-file-item__action-btn--remove\" [title]=\"t('FileList.remove')\">\r\n X\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- \u4F7F\u7528 mc-teleport \u7EC4\u4EF6\u52A0\u8F7D\u6587\u4EF6\u9884\u89C8 -->\r\n <mc-teleport [to]=\"'body'\">\r\n <div *ngIf=\"isPreviewVisible && previewFile\" class=\"mc-file-preview__overlay\" (click.self)=\"closePreview()\">\r\n <!-- \u56FE\u7247\u9884\u89C8 -->\r\n <img *ngIf=\"getPreviewType(previewFile) === 'image'\" [src]=\"sanitizeUrl(previewFile?.['thumbUrl'] || previewFile?.url)\" [alt]=\"previewFile?.name\" class=\"mc-file-preview__content\" />\r\n <!-- \u89C6\u9891\u9884\u89C8 -->\r\n <video *ngIf=\"getPreviewType(previewFile) === 'video'\" [src]=\"sanitizeUrl(previewFile?.url)\" controls class=\"mc-file-preview__content\"></video>\r\n <!-- PDF \u548C \u6587\u672C\u6587\u4EF6\u9884\u89C8 (\u4F7F\u7528 iframe) -->\r\n <iframe *ngIf=\"getPreviewType(previewFile) === 'iframe'\" [src]=\"sanitizeUrl(previewFile?.url)\" class=\"mc-file-preview__content mc-file-preview__iframe\"></iframe>\r\n <!-- \u5176\u4ED6\u6587\u4EF6\u7C7B\u578B\u7684\u5360\u4F4D\u7B26 -->\r\n <div *ngIf=\"getPreviewType(previewFile) === 'unsupported'\" class=\"mc-file-preview__unsupported\">\r\n <span>{{ t('FileList.unsupportedPreview', { fileName: previewFileName }) }}</span>\r\n <span class=\"mc-file-preview__unsupported-tip\">{{ t('FileList.tryDownload') }}</span>\r\n </div>\r\n <!-- \u5173\u95ED\u6309\u94AE -->\r\n <button class=\"mc-file-preview__close-btn\" (click)=\"closePreview()\" [title]=\"t('FileList.close')\">\u2715</button>\r\n </div>\r\n </mc-teleport>\r\n</div>", styles: [".mc-file-list{background-color:var(--devui-base-bg, #ffffff);padding:0 10px}.mc-file-list--context-input{position:relative;padding-bottom:5px}.mc-file-list--context-input .mc-file-list__container{overflow-y:auto}.mc-file-list--context-input:after{content:\"\";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:97%;height:1px;background-color:var(--devui-dividing-line, #f2f2f3)}.mc-file-list--context-dialog{padding:0 10px}.mc-file-list--context-dialog .mc-file-list__container{max-height:none;overflow-y:visible}.mc-file-list--context-dialog .mc-file-item{border-color:var(--devui-line, #d7d8da)}.mc-file-list--context-dialog .mc-file-item--downloadError,.mc-file-list--context-dialog .mc-file-item--downloading{background-color:var(--devui-base-bg, #ffffff)}.mc-file-list__container{display:flex;padding:2px 0;flex-wrap:wrap}.mc-file-list__container::-webkit-scrollbar{width:4px}.mc-file-list__container::-webkit-scrollbar-track{background:var(--devui-global-bg, #f6f6f8)}.mc-file-list__container::-webkit-scrollbar-thumb{background:var(--devui-disabled-bg, #f5f5f5);border-radius:2px}.mc-file-item{position:relative;width:192px;height:58px;margin:5px;display:flex;align-items:center;padding:4px 8px;border:1px solid var(--devui-line, #d7d8da);transition:all .3s ease;border-radius:var(--devui-border-radius-card, 6px)}.mc-file-item:hover .mc-file-item__actions{opacity:1}.mc-file-item__image-preview{width:36px;height:36px;object-fit:cover;border-radius:var(--devui-border-radius, 2px);cursor:pointer}.mc-file-item--success,.mc-file-item--uploadError,.mc-file-item--downloadError{background-color:var(--devui-base-bg, #ffffff)}.mc-file-item__icon-container{margin-right:10px;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;width:36px;height:36px}.mc-file-item__icon{position:relative;display:flex;align-items:center;justify-content:center}.mc-file-item__type-icon{display:inline-block}.mc-file-item__info{flex:1;min-width:0}.mc-file-item__name{font-size:var(--devui-font-size-sm, 12px);color:var(--devui-text, #252b3a);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-file-item__meta{display:flex;align-items:center;font-size:var(--devui-font-size-sm, 12px);color:var(--devui-aide-text, #71757f);gap:8px}.mc-file-item__meta-action{color:var(--devui-link, #526ecc);cursor:pointer}.mc-file-item__size{color:var(--devui-aide-text, #71757f)}.mc-file-item__status--error{color:var(--devui-danger, #f66f6a)}.mc-file-item__progress-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:7px;overflow:hidden}.mc-file-item__progress-mask{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0006}.mc-file-item__wrong-icon{position:relative;z-index:999}.mc-file-item__progress-ring{position:relative;width:17.5px;height:17.5px}.mc-file-item__progress-ring-track,.mc-file-item__progress-ring-circle{fill:transparent;stroke-width:5}.mc-file-item__progress-ring-track{stroke:var(--devui-disabled-bg, #f5f5f5);stroke-opacity:.3}.mc-file-item__progress-ring-circle{stroke:var(--devui-base-bg, #ffffff);stroke-linecap:round;transition:stroke-dashoffset .3s}.mc-file-item__actions{position:absolute;top:-6px;right:-6px;opacity:0;display:flex;align-items:center;justify-content:center;transition:opacity .3s ease}.mc-file-item__action-btn{border:none;background:#c2c2c2;cursor:pointer;border-radius:50%;font-size:8px;width:12px;height:12px;line-height:11px;padding:0;transition:all .3s ease}.mc-file-item__action-btn--remove{color:var(--devui-light-text, #ffffff)}.mc-file-preview__overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:2000}.mc-file-preview__content{max-width:90vw;max-height:90vh;object-fit:contain}.mc-file-preview__iframe{width:80vw;height:90vh;border:none}.mc-file-preview__unsupported{padding:40px 60px;background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius, 2px);color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 12px)}.mc-file-preview__close-btn{position:absolute;top:40px;right:40px;width:40px;height:40px;border-radius:50%;background:#1e1e1e80;color:#fff;border:none;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:background-color .2s}.mc-file-preview__close-btn:hover{background:#0009}.mc-file-preview-fade-enter-active,.mc-file-preview-fade-leave-active{transition:opacity .3s ease}.mc-file-preview-fade-enter-from,.mc-file-preview-fade-leave-to{opacity:0}\n"] }]
|
|
1526
1526
|
}], ctorParameters: () => [{ type: LocaleService }, { type: i2.DomSanitizer }], propDecorators: { fileItems: [{
|
|
1527
1527
|
type: Input
|
|
1528
1528
|
}], context: [{
|