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

定版本转移2025年7月17日
2025-07-17 10:22:38 +08:00
parent 0f860d01e4
commit 92a3d407a7
645 changed files with 30755 additions and 118800 deletions
--- a/Cunkebao/src/components/UploadVideo.tsx
+++ b/Cunkebao/src/components/UploadVideo.tsx
@@ -0,0 +1,94 @@
+import React, { useRef } from 'react';
+import { Button } from 'tdesign-mobile-react';
+import { X } from 'lucide-react';
+import { uploadImage } from '@/api/upload';
+
+interface UploadVideoProps {
+  value?: string;
+  onChange?: (url: string) => void;
+  accept?: string;
+  disabled?: boolean;
+}
+
+const VIDEO_BOX_CLASS =
+  'relative flex items-center justify-center w-full aspect-[16/9] rounded-2xl border-2 border-dashed border-blue-300 bg-gray-50 overflow-hidden';
+
+const UploadVideo: React.FC<UploadVideoProps> = ({
+  value,
+  onChange,
+  accept = 'video/mp4,video/webm,video/ogg,video/quicktime,video/x-msvideo,video/x-ms-wmv,video/x-flv,video/x-matroska',
+  disabled,
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // 选择文件并上传
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    try {
+      const url = await uploadImage(file);
+      onChange?.(url);
+    } catch (err: any) {
+      alert(err?.message || '上传失败');
+    } finally {
+      if (inputRef.current) inputRef.current.value = '';
+    }
+  };
+
+  // 触发文件选择
+  const handleClick = () => {
+    if (!disabled) inputRef.current?.click();
+  };
+
+  // 删除视频
+  const handleDelete = () => {
+    onChange?.('');
+  };
+
+  return (
+    <div className="flex flex-col items-center w-full">
+      {!value ? (
+        <div className={VIDEO_BOX_CLASS}>
+          <input
+            ref={inputRef}
+            type="file"
+            accept={accept}
+            style={{ display: 'none' }}
+            onChange={handleFileChange}
+            disabled={disabled}
+          />
+          <button
+            type="button"
+            className="flex flex-col items-center justify-center w-full h-full bg-transparent border-none outline-none cursor-pointer"
+            onClick={handleClick}
+            disabled={disabled}
+          >
+            <span className="text-3xl mb-2">🎬</span>
+            <span className="text-base text-gray-500 font-medium">点击上传视频</span>
+            <span className="text-xs text-gray-400 mt-1">支持MP4、WebM、MOV等格式</span>
+          </button>
+        </div>
+      ) : (
+        <div className={VIDEO_BOX_CLASS}>
+          <video
+            src={value}
+            controls
+            className="w-full h-full object-cover rounded-2xl bg-black"
+            style={{ background: '#000' }}
+          />
+          <button
+            type="button"
+            className="absolute top-2 right-2 z-10 bg-white/80 hover:bg-white rounded-full p-1 shadow"
+            onClick={handleDelete}
+            disabled={disabled}
+            aria-label="删除视频"
+          >
+            <X className="w-5 h-5 text-gray-600" />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default UploadVideo;