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

app/components/ui/FileProgress.tsx

@@ -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>
+  );
+} 

app/components/ui/ProcessingSteps.tsx

@@ -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>
+  );
+} 

app/components/ui/UploadArea.tsx

@@ -0,0 +1,128 @@
+import { useRef, useState, useCallback, ReactNode, forwardRef, useImperativeHandle } from "react";
+import { Button } from "./Button";
+import uploadAreaStyles from "~/styles/components/upload-area.css?url";
+
+interface UploadAreaProps {
+  onFilesSelected: (files: FileList) => void;
+  className?: string;
+  accept?: string;
+  multiple?: boolean;
+  icon?: string;
+  buttonText?: string;
+  mainText?: string;
+  tipText?: ReactNode;
+  disabled?: boolean;
+}
+
+export interface UploadAreaRef {
+  resetFileInput: () => void;
+}
+
+export function links() {
+  return [{ rel: "stylesheet", href: uploadAreaStyles }];
+}
+
+export const UploadArea = forwardRef<UploadAreaRef, UploadAreaProps>(({
+  onFilesSelected,
+  className = "",
+  accept = "",
+  multiple = false,
+  icon = "ri-upload-cloud-2-line",
+  buttonText = "选择文件",
+  mainText = "点击或拖拽文件到此区域上传",
+  tipText = "",
+  disabled = false
+}, ref) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isDragOver, setIsDragOver] = useState(false);
+
+  const resetFileInput = useCallback(() => {
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  }, []);
+
+  // 暴露resetFileInput方法给父组件
+  useImperativeHandle(ref, () => ({
+    resetFileInput
+  }));
+
+  const handleClick = useCallback(() => {
+    if (!disabled && fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  }, [disabled]);
+
+  const handleFileChange = useCallback(() => {
+    if (fileInputRef.current?.files?.length) {
+      onFilesSelected(fileInputRef.current.files);
+    }
+  }, [onFilesSelected]);
+
+  const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    if (!disabled) {
+      setIsDragOver(true);
+    }
+  }, [disabled]);
+
+  const handleDragLeave = useCallback(() => {
+    setIsDragOver(false);
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    
+    if (!disabled && e.dataTransfer.files.length > 0) {
+      onFilesSelected(e.dataTransfer.files);
+    }
+  }, [disabled, onFilesSelected]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
+    if ((e.key === 'Enter' || e.key === ' ') && !disabled) {
+      e.preventDefault();
+      handleClick();
+    }
+  }, [handleClick, disabled]);
+
+  return (
+    <div 
+      className={`upload-area ${isDragOver ? 'dragover' : ''} ${disabled ? 'disabled' : ''} ${className}`}
+      onClick={handleClick}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      onKeyDown={handleKeyDown}
+      role="button"
+      tabIndex={disabled ? -1 : 0}
+      aria-label="上传文件区域"
+    >
+      <input 
+        type="file" 
+        ref={fileInputRef} 
+        style={{ display: 'none' }} 
+        onChange={handleFileChange}
+        accept={accept}
+        multiple={multiple}
+        disabled={disabled}
+      />
+      <i className={`${icon} upload-icon`} aria-hidden="true"></i>
+      <div className="upload-text">{mainText}</div>
+      {tipText && <p className="upload-tip mb-2">{tipText}</p>}
+      <Button 
+        type="primary" 
+        icon="ri-file-upload-line"
+        disabled={disabled}
+        onClick={(e) => {
+          e.stopPropagation();
+          handleClick();
+        }}
+      >
+        {buttonText}
+      </Button>
+    </div>
+  );
+});
+
+UploadArea.displayName = "UploadArea";