111

2026-02-09 16:33:52 +08:00
parent 52c6322a24
commit 28040495c8
63 changed files with 26743 additions and 301 deletions
--- a/src/components/Control/CameraControlCard.tsx
+++ b/src/components/Control/CameraControlCard.tsx
@@ -0,0 +1,98 @@
+import React from 'react'
+import { Card, Row, Col, Button } from 'antd'
+import { VideoCameraOutlined, StopOutlined, CameraOutlined, SwapOutlined } from '@ant-design/icons'
+
+export interface CameraControlCardProps {
+    operationEnabled: boolean
+    isCameraActive: boolean
+    currentCameraType: 'front' | 'back'
+    cameraViewVisible: boolean
+    onStart: () => void
+    onStop: () => void
+    onSwitch: (type: 'front' | 'back') => void
+    onToggleView: () => void
+}
+
+export const CameraControlCard: React.FC<CameraControlCardProps> = ({
+    operationEnabled,
+    isCameraActive,
+    currentCameraType,
+    onStart,
+    onStop,
+    onSwitch
+}) => {
+    return (
+        <Card >
+            <Row gutter={[8, 8]}>
+                <Col span={6}>
+                    <Button
+                        block
+                        type={isCameraActive ? 'default' : 'primary'}
+                        icon={<VideoCameraOutlined />}
+                        onClick={onStart}
+                        disabled={!operationEnabled || isCameraActive}
+                        style={{ background: !isCameraActive && operationEnabled ? 'linear-gradient(135deg, #52c41a 0%, #73d13d 100%)' : undefined, borderColor: !isCameraActive && operationEnabled ? '#52c41a' : undefined, color: !isCameraActive && operationEnabled ? 'white' : undefined }}
+                    >
+                        {isCameraActive ? '摄像头已启动' : '启动摄像头'}
+                    </Button>
+                </Col>
+                <Col span={6}>
+                    <Button
+                        block
+                        type={isCameraActive ? 'primary' : 'default'}
+                        icon={<StopOutlined />}
+                        onClick={onStop}
+                        disabled={!operationEnabled || !isCameraActive}
+                        style={{ background: isCameraActive && operationEnabled ? 'linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%)' : undefined, borderColor: isCameraActive && operationEnabled ? '#ff4d4f' : undefined, color: isCameraActive && operationEnabled ? 'white' : undefined }}
+                    >
+                        {isCameraActive ? '停止摄像头' : '摄像头已停止'}
+                    </Button>
+                </Col>
+
+                <Col span={6}>
+                    <Button
+                        block
+                        type={currentCameraType === 'front' ? 'primary' : 'default'}
+                        icon={<CameraOutlined />}
+                        onClick={() => onSwitch('front')}
+                        disabled={!operationEnabled || !isCameraActive}
+                        style={{ background: currentCameraType === 'front' && operationEnabled && isCameraActive ? 'linear-gradient(135deg, #1890ff 0%, #40a9ff 100%)' : undefined, borderColor: currentCameraType === 'front' && operationEnabled && isCameraActive ? '#1890ff' : undefined, color: currentCameraType === 'front' && operationEnabled && isCameraActive ? 'white' : undefined }}
+                    >
+                        前置摄像头
+                    </Button>
+                </Col>
+                <Col span={6}>
+                    <Button
+                        block
+                        type={currentCameraType === 'back' ? 'primary' : 'default'}
+                        icon={<SwapOutlined />}
+                        onClick={() => onSwitch('back')}
+                        disabled={!operationEnabled || !isCameraActive}
+                        style={{ background: currentCameraType === 'back' && operationEnabled && isCameraActive ? 'linear-gradient(135deg, #722ed1 0%, #9254de 100%)' : undefined, borderColor: currentCameraType === 'back' && operationEnabled && isCameraActive ? '#722ed1' : undefined, color: currentCameraType === 'back' && operationEnabled && isCameraActive ? 'white' : undefined }}
+                    >
+                        后置摄像头
+                    </Button>
+                </Col>
+            </Row>
+
+            {/* <Row gutter={[8, 8]} style={{ marginTop: 8 }}>
+                <Col span={24}> 
+                    <Button
+                        block
+                        type={cameraViewVisible ? 'primary' : 'default'}
+                        icon={<EyeOutlined />}
+                        onClick={onToggleView}
+                        disabled={!operationEnabled || !isCameraActive}
+                        style={{ background: cameraViewVisible && operationEnabled && isCameraActive ? 'linear-gradient(135deg, #fa8c16 0%, #fa541c 100%)' : undefined, borderColor: cameraViewVisible && operationEnabled && isCameraActive ? '#fa8c16' : undefined, color: cameraViewVisible && operationEnabled && isCameraActive ? 'white' : undefined }}
+                    >
+                        {cameraViewVisible ? '隐藏摄像头画面' : '显示摄像头画面'}
+                    </Button>
+                </Col>
+            </Row> */}
+        </Card>
+    )
+}
+
+export default CameraControlCard
+
+