新增文件上传页面，新增文件上传的公共组件（进度条，步骤条，上传区域）

2025-03-31 19:53:26 +08:00
parent 65da73071d
commit 8fe88c1d15
19 changed files with 1492 additions and 32 deletions
@@ -0,0 +1,44 @@
+import fileProgressStyles from "~/styles/components/file-progress.css?url";
+
+interface FileProgressProps {
+  fileName: string;
+  fileSize?: string;
+  progress: number;
+  speed?: string;
+  className?: string;
+}
+
+export function links() {
+  return [{ rel: "stylesheet", href: fileProgressStyles }];
+}
+
+export function FileProgress({
+  fileName,
+  fileSize,
+  progress,
+  speed = "0KB/s",
+  className = ""
+}: FileProgressProps) {
+  return (
+    <div className={`progress-container ${className}`}>
+      <div className="mb-2 flex justify-between items-center">
+        <span className="font-medium">{fileName}</span>
+        {fileSize && <span className="text-secondary text-sm">{fileSize}</span>}
+      </div>
+      <div className="progress-bar">
+        <div 
+          className="progress-bar-inner" 
+          style={{ width: `${progress}%` }}
+          role="progressbar"
+          aria-valuenow={progress}
+          aria-valuemin={0}
+          aria-valuemax={100}
+        ></div>
+      </div>
+      <div className="progress-text">
+        <span>{progress}%</span>
+        <span>{speed}</span>
+      </div>
+    </div>
+  );
+}