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

2025-03-31 19:53:26 +08:00
parent 65da73071d
commit 8fe88c1d15
19 changed files with 1492 additions and 32 deletions
@@ -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";