首次提交by MimoCode

2026-06-15 14:50:15 +08:00
parent 584b31da50
commit ead13f863c
166 changed files with 14908 additions and 1 deletions
@@ -0,0 +1,67 @@
+import React, { useEffect } from 'react';
+import { Button, Toast } from 'antd-mobile';
+import { useCamera } from '../../hooks';
+import './index.css';
+
+interface CameraCaptureProps {
+  onCapture: (file: File) => void;
+  onClose?: () => void;
+}
+
+const CameraCapture: React.FC<CameraCaptureProps> = ({ onCapture, onClose }) => {
+  const { videoRef, canvasRef, isReady, error, start, stop, capture } = useCamera();
+  
+  useEffect(() => {
+    start();
+    
+    return () => {
+      stop();
+    };
+  }, [start, stop]);
+  
+  const handleCapture = async () => {
+    const file = await capture();
+    if (file) {
+      onCapture(file);
+    } else {
+      Toast.show({ content: '拍照失败', icon: 'fail' });
+    }
+  };
+  
+  if (error) {
+    return (
+      <div className="camera-error">
+        <p>{error}</p>
+        <Button onClick={start}>重试</Button>
+      </div>
+    );
+  }
+  
+  return (
+    <div className="camera-capture">
+      <video 
+        ref={videoRef} 
+        className="camera-video"
+        playsInline
+        autoPlay
+      />
+      <canvas ref={canvasRef} className="camera-canvas" />
+      
+      <div className="camera-controls">
+        <Button 
+          className="capture-btn"
+          onClick={handleCapture}
+          disabled={!isReady}
+        >
+          拍照
+        </Button>
+        
+        {onClose && (
+          <Button onClick={onClose}>取消</Button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CameraCapture;