@zjlab-fe/data-hub-ui 0.30.0 → 0.31.1

package/dist/types/components/file-uploader/components/icons.d.ts

@@ -3,3 +3,5 @@ export declare function FileIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function CloseIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function PauseIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function ResumeIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function RetryIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function TipIcon(): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/file-uploader/components/uploader-file-item.d.ts

@@ -22,6 +22,8 @@ export interface UploaderFileItemClassNames {
     pauseBtn?: string;
     /** Resume button */
     resumeBtn?: string;
+    /** Retry button */
+    retryBtn?: string;
     /** Close/Cancel button */
     closeBtn?: string;
 }
@@ -39,6 +41,8 @@ interface FileItemProps {
     onPause?: (id: string) => void;
     /** Resume function passed from parent that has upload handlers */
     onResume?: (id: string) => void;
+    /** Retry function passed from parent that has upload handlers */
+    onRetry?: (id: string) => void;
 }
 export declare function UploaderFileItem(props: FileItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/file-uploader/components/uploader-progress-bar.d.ts

@@ -0,0 +1,9 @@
+import './uploader-progress-bar.css';
+interface UploaderProgressBarProps {
+    /** Hide when only 0 or 1 files */
+    hideWhenSingle?: boolean;
+    /** Custom class name */
+    className?: string;
+}
+export declare function UploaderProgressBar({ hideWhenSingle, className }: UploaderProgressBarProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/types/components/file-uploader/components/uploader.d.ts

@@ -32,6 +32,8 @@ interface UploaderProps {
     onDropZoneError?: (error: DropZoneError) => void;
     /** custom file validation callback */
     fileValidation?: (file: File) => boolean | Promise<boolean>;
+    /** Whether to show the multi-file progress bar at the top. Default: true */
+    showProgressBar?: boolean;
 }
 /**
  * Styled File Uploader - Matches FileUploader capabilities with custom styling

package/dist/types/components/file-uploader/context/use-upload-engine.d.ts

@@ -19,4 +19,9 @@ export declare function useUploadEngine(): {
     resumeUpload: (fileId: string) => Promise<void>;
     /** Cancel a file upload */
     cancelUpload: (fileId: string) => Promise<void>;
+    /** Retry a failed upload (smart retry with full retry fallback) */
+    retryUpload: (fileId: string, forceFullRetry?: boolean) => Promise<{
+        success: boolean;
+        retryType: "smart" | "full";
+    }>;
 };

package/dist/types/components/file-uploader/demo/index.d.ts

@@ -1,2 +1,3 @@
+import './index.css';
 declare function App(): import("react/jsx-runtime").JSX.Element;
 export default App;

package/dist/types/components/file-uploader/demo/mockApi.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Demo mock for file-uploader retry scenarios.
+ * Keep fail strategies out of component business handlers.
+ *
+ * Chunk PUTs are intercepted locally (no external httpbin dependency).
+ * httpbin.org currently returns 503 in many networks, which made every chunk fail.
+ */
+export type FailMode = 'none' | 'urlFail' | 'partialChunkFail';
+export type DemoEventLog = {
+    time: string;
+    message: string;
+};
+/** Local mock URLs intercepted by installDemoUploadMock() */
+declare const MOCK_UPLOAD_URL = "https://upload.mock.local/ok";
+declare const MOCK_BAD_UPLOAD_URL = "https://upload.mock.local/fail";
+/**
+ * Intercept XMLHttpRequest for demo mock upload URLs.
+ * The real uploader uses axios PUT; this keeps the demo offline-capable and stable.
+ */
+export declare function installDemoUploadMock(): () => void;
+export declare function bumpAttemptCount(fileName: string): number;
+export declare function resetAttemptCounts(): void;
+export declare function createDemoUploadUrls(fileName: string, partCount: number, failMode: FailMode): {
+    success: false;
+    reason: string;
+} | {
+    success: true;
+    uploadInfo: {
+        uploadId: string;
+        uploadUrls: {
+            partNum: number;
+            uploadUrl: string;
+        }[];
+    };
+};
+export declare function formatDemoEvent(message: string): DemoEventLog;
+export { MOCK_UPLOAD_URL, MOCK_BAD_UPLOAD_URL };

package/dist/types/components/file-uploader/hooks/use-upload.d.ts

@@ -58,6 +58,10 @@ export declare function useUpload(): {
     pause: (id: string) => void;
     resume: (id: string) => Promise<void>;
     cancel: (id: string) => Promise<void>;
+    retry: (id: string) => Promise<{
+        success: boolean;
+        retryType: "smart" | "full";
+    }>;
     /** Get a specific file by ID */
     getFileById: (id: string) => UploadFile | undefined;
     /** Files waiting to be uploaded */

package/dist/types/components/file-uploader/index.d.ts

@@ -3,6 +3,7 @@ export { Uploader as FileUploader } from './components/uploader';
 export { UploaderDropZone } from './components/uploader-drop-zone';
 export { UploaderFileListLayout } from './components/uploader-file-list';
 export { UploaderFileItem } from './components/uploader-file-item';
+export { UploaderProgressBar } from './components/uploader-progress-bar';
 export { useUpload } from './hooks/use-upload';
 export type { UploadFile, ChunkState, UploadHandlers, HandlerContext, CallbackResult, GetUploadUrlsResult, UploadUrl, UploadConfig, AddFilesOptions, } from './types';
 export type { DropZoneError, UploaderDropZoneClassNames, UploaderDropZoneProps, } from './components/uploader-drop-zone';

package/dist/types/components/file-uploader/types.d.ts

@@ -75,6 +75,11 @@ export interface HandlerContext {
     resume: (id: string) => Promise<void>;
     /** Cancel a file upload (always fresh) */
     cancel: (id: string) => void;
+    /** Retry a failed upload (always fresh) */
+    retry: (id: string) => Promise<{
+        success: boolean;
+        retryType: 'smart' | 'full';
+    }>;
     /** Get a specific file by ID (always fresh) */
     getFileById: (id: string) => UploadFile | undefined;
 }

package/es/components/file-uploader/components/icons.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 function UploadIcon(props) {
     return (jsx("svg", Object.assign({ width: "34", height: "31", viewBox: "0 0 34 31", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsxs("g", { id: "\u00E4\u00B8\u008A\u00E4\u00BC\u00A0\u00E6\u008F\u0092\u00E5\u009B\u00BE", children: [jsx("path", { id: "Vector", d: "M26 8.66665V29.7043C26.0013 29.867 25.9705 30.0284 25.9094 30.1792C25.8483 30.33 25.7581 30.4672 25.6439 30.5831C25.5297 30.699 25.3938 30.7913 25.244 30.8547C25.0941 30.918 24.9332 30.9512 24.7705 30.9523H1.22943C0.903577 30.9523 0.591055 30.823 0.360528 30.5927C0.130002 30.3624 0.000328142 30.05 0 29.7241V1.22819C0 0.563332 0.553428 0 1.23562 0H17.3333V7.42856C17.3333 7.75692 17.4638 8.07184 17.6959 8.30402C17.9281 8.53621 18.243 8.66665 18.5714 8.66665H26ZM26 6.19047H19.8095V0.00371423L26 6.19047Z", fill: "#B9D6FF" }), jsxs("g", { id: "Group 1000006993", children: [jsx("circle", { id: "Ellipse 87", cx: "26", cy: "23", r: "8", fill: "#1775FE" }), jsx("path", { id: "Vector_2", d: "M26.4545 24.315V27.5714H25.5455V24.315L24.3034 25.2023L23.775 24.4625L26 22.8732L28.225 24.4625L27.6966 25.2023L26.4545 24.315ZM31 24.4545C31 25.7098 29.9825 26.7273 28.7273 26.7273H27.3636V25.8182H28.7273C29.0749 25.8184 29.4094 25.6858 29.6625 25.4476C29.9156 25.2094 30.0682 24.8835 30.0891 24.5365C30.11 24.1896 29.9976 23.8477 29.7749 23.5808C29.5522 23.314 29.236 23.1422 28.8909 23.1007L28.4568 23.0489L28.4918 22.6127C28.4973 22.5455 28.5 22.4775 28.5 22.4091C28.5 21.0284 27.3807 19.9091 26 19.9091C25.4245 19.9091 24.8666 20.1077 24.4205 20.4712C23.9744 20.8347 23.6672 21.3409 23.5509 21.9045L23.4955 22.175L23.2295 22.2507C22.8492 22.3591 22.5146 22.5885 22.2763 22.9042C22.038 23.2198 21.9091 23.6045 21.9091 24C21.9091 24.4822 22.1006 24.9447 22.4416 25.2856C22.7826 25.6266 23.2451 25.8182 23.7273 25.8182H24.6364V26.7273H23.7273C22.2211 26.7273 21 25.5061 21 24C21 22.8655 21.6989 21.8682 22.7239 21.4632C22.9292 20.753 23.3598 20.1288 23.9506 19.6846C24.5415 19.2403 25.2607 19.0001 26 19C27.8414 19 29.3416 20.4598 29.4068 22.2852C29.8687 22.4302 30.2723 22.7187 30.5588 23.1089C30.8453 23.499 30.9999 23.9705 31 24.4545Z", fill: "white" })] })] }) })));
@@ -7,13 +7,19 @@ function FileIcon() {
     return (jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }));
 }
 function CloseIcon() {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }));
+    return (jsx("svg", { width: "20", height: "20", viewBox: "5 5 14 14", fill: "currentColor", children: jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }));
 }
 function PauseIcon() {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }));
+    return (jsx("svg", { width: "20", height: "20", viewBox: "6 5 12 14", fill: "currentColor", children: jsx("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }));
 }
 function ResumeIcon() {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M8 5v14l11-7z" }) }));
+    return (jsx("svg", { width: "20", height: "20", viewBox: "8 5 11 14", fill: "currentColor", children: jsx("path", { d: "M8 5v14l11-7z" }) }));
+}
+function RetryIcon() {
+    return (jsx("svg", { width: "20", height: "20", viewBox: "4 4 16 16", fill: "currentColor", children: jsx("path", { d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" }) }));
+}
+function TipIcon() {
+    return (jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": true, children: [jsx("circle", { cx: "12", cy: "12", r: "9", strokeWidth: "1.5" }), jsx("path", { d: "M12 16v-5M12 8h.01", strokeWidth: "1.5", strokeLinecap: "round" })] }));
 }
 
-export { CloseIcon, FileIcon, PauseIcon, ResumeIcon, UploadIcon as default };
+export { CloseIcon, FileIcon, PauseIcon, ResumeIcon, RetryIcon, TipIcon, UploadIcon as default };

package/es/components/file-uploader/components/uploader-file-item.css.js

@@ -158,6 +158,15 @@ function useStyle() {
   border-radius: 0.375rem; /* 6px */
 }
 
+/* Keep icon box same size as CircleProgress (20x20), not stretching to button */
+
+.upload-action-btn svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+  flex-shrink: 0;
+}
+
 .upload-action-btn:hover {
   background: var(--uploader-action-hover-bg);
   color: var(--uploader-action-hover-text);
@@ -183,6 +192,19 @@ function useStyle() {
   color: var(--uploader-action-close-hover-text);
   background: var(--uploader-action-close-hover-bg);
 }
+
+.upload-retry-btn {
+  opacity: 0.5;
+}
+
+.upload-file-item:hover .upload-retry-btn {
+  opacity: 1;
+}
+
+.upload-retry-btn:hover {
+  color: var(--uploader-action-close-hover-text);
+  background: var(--uploader-action-close-hover-bg);
+}
 `;
   document.head.appendChild(style);
 }

package/es/components/file-uploader/components/uploader-file-item.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { UploadStatus } from '../constants.js';
 import { CircleProgress } from './circle-progress.js';
-import { FileIcon, PauseIcon, ResumeIcon, CloseIcon } from './icons.js';
+import { FileIcon, PauseIcon, ResumeIcon, RetryIcon, CloseIcon } from './icons.js';
 import { UploadingStatus } from './uploading-status.js';
 import useStyle from './theme.css.js';
 import useStyle$1 from './uploader-file-item.css.js';
@@ -9,7 +9,7 @@ import useStyle$1 from './uploader-file-item.css.js';
 useStyle();
 useStyle$1();
 function UploaderFileItem(props) {
-    const { file, classNames, onCancel, onRemove, onPause, onResume } = props;
+    const { file, classNames, onCancel, onRemove, onPause, onResume, onRetry } = props;
     const semanticClassNames = typeof classNames === 'function' ? classNames(props) : classNames;
     const isFailed = file.status === UploadStatus.FAILED;
     const isSuccess = file.status === UploadStatus.SUCCESS;
@@ -17,6 +17,7 @@ function UploaderFileItem(props) {
     const isPaused = file.status === UploadStatus.PAUSED;
     const showPause = !isSuccess && !isFailed && !isCancelled && !isPaused && onPause;
     const showResume = isPaused && onResume;
+    const showRetry = isFailed && !!file.file && onRetry;
     const handleClose = () => {
         if (isFailed || isSuccess || isCancelled) {
             onRemove === null || onRemove === void 0 ? void 0 : onRemove(file.id);
@@ -59,7 +60,7 @@ function UploaderFileItem(props) {
             return 'cancelled';
         return 'uploading';
     };
-    return (jsxs("div", { className: `upload-file-item ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.container) || ''}`, "data-status": getStatusAttribute(), children: [jsxs("div", { className: `upload-file-info ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.info) || ''}`, children: [jsx("div", { className: `upload-file-icon ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.icon) || ''}`, children: jsx(FileIcon, {}) }), jsxs("span", { className: `upload-file-name ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.name) || ''}`, children: [file.fileName, file.relativePath && (jsx("span", { className: `upload-file-path ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.relativePath) || ''}`, children: file.relativePath }))] })] }), jsxs("div", { className: `upload-file-status ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.status) || ''}`, children: [jsx("span", { className: `upload-status-text ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.statusText) || ''}`, children: getStatusText() }), jsx("div", { className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.progress, children: jsx(CircleProgress, { percent: file.progress, isFailed: isFailed, isSuccess: isSuccess }) }), showPause && (jsx("button", { className: `upload-action-btn upload-pause-btn ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.pauseBtn) || ''}`, onClick: () => onPause === null || onPause === void 0 ? void 0 : onPause(file.id), title: "\u6682\u505C\u4E0A\u4F20", children: jsx(PauseIcon, {}) })), showResume && (jsx("button", { className: `upload-action-btn upload-resume-btn ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.resumeBtn) || ''}`, onClick: () => onResume === null || onResume === void 0 ? void 0 : onResume(file.id), title: "\u7EE7\u7EED\u4E0A\u4F20", children: jsx(ResumeIcon, {}) }))] }), jsx("button", { className: `upload-action-btn upload-close-btn ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.closeBtn) || ''}`, onClick: handleClose, title: isFailed || isSuccess ? '移除' : '取消上传', children: jsx(CloseIcon, {}) })] }));
+    return (jsxs("div", { className: `upload-file-item ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.container) || ''}`, "data-status": getStatusAttribute(), children: [jsxs("div", { className: `upload-file-info ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.info) || ''}`, children: [jsx("div", { className: `upload-file-icon ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.icon) || ''}`, children: jsx(FileIcon, {}) }), jsxs("span", { className: `upload-file-name ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.name) || ''}`, children: [file.fileName, file.relativePath && (jsx("span", { className: `upload-file-path ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.relativePath) || ''}`, children: file.relativePath }))] })] }), jsxs("div", { className: `upload-file-status ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.status) || ''}`, children: [jsx("span", { className: `upload-status-text ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.statusText) || ''}`, children: getStatusText() }), jsx("div", { className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.progress, children: jsx(CircleProgress, { percent: file.progress, isFailed: isFailed, isSuccess: isSuccess }) }), showPause && (jsx("button", { className: `upload-action-btn upload-pause-btn ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.pauseBtn) || ''}`, onClick: () => onPause === null || onPause === void 0 ? void 0 : onPause(file.id), title: "\u6682\u505C\u4E0A\u4F20", children: jsx(PauseIcon, {}) })), showResume && (jsx("button", { className: `upload-action-btn upload-resume-btn ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.resumeBtn) || ''}`, onClick: () => onResume === null || onResume === void 0 ? void 0 : onResume(file.id), title: "\u7EE7\u7EED\u4E0A\u4F20", children: jsx(ResumeIcon, {}) })), showRetry && (jsx("button", { className: `upload-action-btn upload-retry-btn ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.retryBtn) || ''}`, onClick: () => onRetry === null || onRetry === void 0 ? void 0 : onRetry(file.id), title: "\u91CD\u8BD5\u4E0A\u4F20", children: jsx(RetryIcon, {}) }))] }), jsx("button", { className: `upload-action-btn upload-close-btn ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.closeBtn) || ''}`, onClick: handleClose, title: isFailed || isSuccess ? '移除' : '取消上传', children: jsx(CloseIcon, {}) })] }));
 }
 
 export { UploaderFileItem };

package/es/components/file-uploader/components/uploader-progress-bar.css.js

@@ -0,0 +1,43 @@
+function useStyle() {
+  var style = document.createElement('style');
+  style.textContent = `.uploader-progress-bar {
+  padding: 0.75rem 0;
+}
+
+.uploader-progress-bar-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.uploader-progress-bar-text {
+  font-size: 0.875rem;
+  color: var(--uploader-text-secondary, #64748b);
+}
+
+.uploader-progress-bar-percent {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--uploader-text, #1e293b);
+}
+
+.uploader-progress-bar-track {
+  width: 100%;
+  height: 0.5rem;
+  background-color: var(--uploader-border, #e2e8f0);
+  border-radius: 9999px;
+  overflow: hidden;
+}
+
+.uploader-progress-bar-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #3b82f6, #60a5fa);
+  border-radius: 9999px;
+  transition: width 0.3s ease;
+}
+`;
+  document.head.appendChild(style);
+}
+
+export { useStyle as default };

package/es/components/file-uploader/components/uploader-progress-bar.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useUpload } from '../hooks/use-upload.js';
+import { UploadStatus } from '../constants.js';
+import useStyle from './uploader-progress-bar.css.js';
+
+useStyle();
+function UploaderProgressBar({ hideWhenSingle = true, className = '' }) {
+    const { files } = useUpload();
+    if (files.length === 0)
+        return null;
+    if (hideWhenSingle && files.length <= 1)
+        return null;
+    const completedCount = files.filter((f) => f.status === UploadStatus.SUCCESS).length;
+    const totalCount = files.length;
+    const percent = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0;
+    return (jsxs("div", { className: `uploader-progress-bar ${className}`, children: [jsxs("div", { className: "uploader-progress-bar-info", children: [jsxs("span", { className: "uploader-progress-bar-text", children: ["\u5DF2\u5B8C\u6210: ", completedCount, " / ", totalCount, " \u4E2A\u6587\u4EF6"] }), jsxs("span", { className: "uploader-progress-bar-percent", children: [percent, "%"] })] }), jsx("div", { className: "uploader-progress-bar-track", children: jsx("div", { className: "uploader-progress-bar-fill", style: { width: `${percent}%` } }) })] }));
+}
+
+export { UploaderProgressBar };

package/es/components/file-uploader/components/uploader.css.js

@@ -15,6 +15,23 @@ function useStyle() {
   color: var(--uploader-text);
 }
 
+.uploader-network-tip {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.375rem;
+  margin: -0.75rem 0 0.75rem;
+  color: #87909e;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.uploader-network-tip-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+  color: #87909e;
+}
+
 
 
 `;

package/es/components/file-uploader/components/uploader.js

@@ -6,7 +6,9 @@ import { DEFAULT_MAX_FILE_SIZE } from '../constants.js';
 import { UploaderDropZone } from './uploader-drop-zone.js';
 import { UploaderFileListLayout } from './uploader-file-list.js';
 import { UploaderFileItem } from './uploader-file-item.js';
+import { UploaderProgressBar } from './uploader-progress-bar.js';
 import { useUpload } from '../hooks/use-upload.js';
+import { TipIcon } from './icons.js';
 
 useStyle();
 useStyle$1();
@@ -39,15 +41,15 @@ useStyle$1();
  */
 function Uploader(props) {
     const { handlers, runtime, dragAreaDescription = '点击或拖拽上传文件', accept = '', directory = false, maxFiles, maxSize = DEFAULT_MAX_FILE_SIZE, // 10GB default
-    classNames, onDropZoneError, fileValidation, } = props;
+    classNames, onDropZoneError, fileValidation, showProgressBar = true, } = props;
     const SemanticClassNames = typeof classNames === 'function' ? classNames(props) : classNames;
-    const { files, addFiles, startAll, cancel, removeFile } = useUpload();
+    const { files, addFiles, startAll, cancel, removeFile, retry } = useUpload();
     // Auto-start newly added pending files
     useEffect(() => {
         startAll();
     }, [startAll]);
     const handleAddFiles = useCallback((dropped) => addFiles(dropped, { handlers }, runtime), [addFiles, handlers, runtime]);
-    return (jsxs("div", { className: `styled-uploader-container ${(SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.container) || ''}`, children: [jsx(UploaderDropZone, { accept: accept, directory: directory, maxFiles: maxFiles, maxSize: maxSize, dragAreaDescription: dragAreaDescription, onDrop: handleAddFiles, onError: onDropZoneError, fileValidation: fileValidation, classNames: SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.dragZone }), jsx(UploaderFileListLayout, { classNames: SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.fileList, children: files.map((file) => (jsx(UploaderFileItem, { file: file, onCancel: cancel, onRemove: removeFile, classNames: SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.fileItem }, file.id))) })] }));
+    return (jsxs("div", { className: `styled-uploader-container ${(SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.container) || ''}`, children: [jsx(UploaderDropZone, { accept: accept, directory: directory, maxFiles: maxFiles, maxSize: maxSize, dragAreaDescription: dragAreaDescription, onDrop: handleAddFiles, onError: onDropZoneError, fileValidation: fileValidation, classNames: SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.dragZone }), jsxs("div", { className: "uploader-network-tip", children: [jsx("span", { className: "uploader-network-tip-icon", children: jsx(TipIcon, {}) }), jsx("span", { children: "\u4E0A\u4F20\u5931\u8D25\u591A\u4E3A\u7F51\u7EDC\u95EE\u9898\uFF0C\u8BF7\u518D\u6B21\u8FDB\u884C\u4E0A\u4F20\uFF08\u540C\u540D\u6587\u4EF6\u4F1A\u8FDB\u884C\u8986\u76D6\uFF09" })] }), showProgressBar && jsx(UploaderProgressBar, {}), jsx(UploaderFileListLayout, { classNames: SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.fileList, children: files.map((file) => (jsx(UploaderFileItem, { file: file, onCancel: cancel, onRemove: removeFile, onRetry: retry, classNames: SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.fileItem }, file.id))) })] }));
 }
 
 export { Uploader };