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

2025-03-31 19:53:26 +08:00
parent 65da73071d
commit 8fe88c1d15
19 changed files with 1492 additions and 32 deletions
@@ -0,0 +1,41 @@
+import processingStepsStyles from "~/styles/components/processing-steps.css?url";
+
+export interface Step {
+  title: string;
+  description: string;
+  status: 'waiting' | 'active' | 'done' | 'error';
+}
+
+interface ProcessingStepsProps {
+  steps: Step[];
+  className?: string;
+}
+
+export function links() {
+  return [{ rel: "stylesheet", href: processingStepsStyles }];
+}
+
+export function ProcessingSteps({ steps, className = "" }: ProcessingStepsProps) {
+  return (
+    <div className={`steps-container-horizontal ${className}`}>
+      {steps.map((step, index) => (
+        <div 
+          key={index} 
+          className={`step-item-horizontal ${step.status}`}
+          data-step={index + 1}
+        >
+          <div className="step-icon-horizontal">
+            {step.status === 'done' && <i className="ri-check-line"></i>}
+            {step.status === 'error' && <i className="ri-close-line"></i>}
+            {step.status === 'active' && <span className="loading-spinner"></span>}
+            {step.status === 'waiting' && <span>{index + 1}</span>}
+          </div>
+          <div className="step-content-horizontal">
+            <div className="step-title-horizontal">{step.title}</div>
+            <div className="step-description-horizontal">{step.description}</div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}