web-bak/src/components/Control/CameraControlCard.tsx

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