feat: 本次提交更新内容如下

格式更新一下

nkebao/src/components/Upload/VideoUpload.tsx

@@ -0,0 +1,144 @@
+import React, { useState } from "react";
+import { Upload, message } from "antd";
+import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
+import type { UploadProps, UploadFile } from "antd/es/upload/interface";
+import request from "@/api/request";
+import style from "./index.module.scss";
+
+interface VideoUploadProps {
+  value?: string;
+  onChange?: (url: string) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+const VideoUpload: React.FC<VideoUploadProps> = ({
+  value = "",
+  onChange,
+  disabled = false,
+  className,
+}) => {
+  const [loading, setLoading] = useState(false);
+  const [fileList, setFileList] = useState<UploadFile[]>([]);
+
+  // 将value转换为fileList格式
+  React.useEffect(() => {
+    if (value) {
+      const file: UploadFile = {
+        uid: "-1",
+        name: "video",
+        status: "done",
+        url: value,
+      };
+      setFileList([file]);
+    } else {
+      setFileList([]);
+    }
+  }, [value]);
+
+  // 文件验证
+  const beforeUpload = (file: File) => {
+    const isVideo = file.type.startsWith("video/");
+    if (!isVideo) {
+      message.error("只能上传视频文件！");
+      return false;
+    }
+
+    const isLt50M = file.size / 1024 / 1024 < 50;
+    if (!isLt50M) {
+      message.error("视频大小不能超过50MB！");
+      return false;
+    }
+
+    return false; // 阻止自动上传
+  };
+
+  // 处理文件变化
+  const handleChange: UploadProps["onChange"] = info => {
+    if (info.file.status === "uploading") {
+      setLoading(true);
+      return;
+    }
+    if (info.file.status === "done") {
+      setLoading(false);
+      // 更新fileList
+      setFileList([info.file]);
+      // 调用onChange
+      onChange?.(info.file.url || "");
+    }
+  };
+
+  // 自定义上传请求
+  const customRequest: UploadProps["customRequest"] = async ({
+    file,
+    onSuccess,
+    onError,
+  }) => {
+    try {
+      setLoading(true);
+      const formData = new FormData();
+      formData.append("file", file as File);
+
+      const response = await request("/v1/attachment/upload", formData, "POST");
+
+      if (response) {
+        const uploadedUrl =
+          typeof response === "string" ? response : response.url || response;
+        onSuccess?.(uploadedUrl);
+      } else {
+        throw new Error("上传失败");
+      }
+    } catch (error) {
+      console.error("上传失败:", error);
+      onError?.(error as Error);
+      message.error("上传失败，请重试");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 删除文件
+  const handleRemove = () => {
+    setFileList([]);
+    onChange?.("");
+    return true;
+  };
+
+  const uploadButton = (
+    <div className={style["upload-button"]}>
+      {loading ? (
+        <div className={style["uploading"]}>
+          <LoadingOutlined className={style["upload-icon"]} />
+          <div className={style["upload-text"]}>上传中...</div>
+        </div>
+      ) : (
+        <>
+          <PlusOutlined className={style["upload-icon"]} />
+          <div className={style["upload-text"]}>上传视频</div>
+        </>
+      )}
+    </div>
+  );
+
+  return (
+    <div className={`${style["upload-container"]} ${className || ""}`}>
+      <Upload
+        name="file"
+        multiple={false}
+        fileList={fileList}
+        accept="video/*"
+        listType="text"
+        showUploadList={true}
+        disabled={disabled || loading}
+        beforeUpload={beforeUpload}
+        customRequest={customRequest}
+        onChange={handleChange}
+        onRemove={handleRemove}
+      >
+        {fileList.length >= 1 ? null : uploadButton}
+      </Upload>
+    </div>
+  );
+};
+
+export default VideoUpload;