1009 lines
34 KiB
TypeScript
1009 lines
34 KiB
TypeScript
|
import React, { useRef, useEffect, useState, useCallback } from 'react'
|
|||
|
|
import { Card, Spin } from 'antd'
|
|||
|
|
import { useSelector } from 'react-redux'
|
|||
|
|
import type { RootState } from '../../store/store'
|
|||
|
|
|
|||
|
|
interface DeviceScreenProps {
|
|||
|
|
deviceId: string
|
|||
|
|
onScreenSizeChange?: (size: { width: number, height: number }) => void
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 设备屏幕显示组件
|
|||
|
|
*/
|
|||
|
|
const DeviceScreen: React.FC<DeviceScreenProps> = ({ deviceId, onScreenSizeChange }) => {
|
|||
|
|
// const dispatch = useDispatch<AppDispatch>()
|
|||
|
|
const canvasRef = useRef<HTMLCanvasElement>(null)
|
|||
|
|
const [isLoading, setIsLoading] = useState(true)
|
|||
|
|
const [imageSize, setImageSize] = useState<{ width: number, height: number } | null>(null)
|
|||
|
|
|
|||
|
|
// ✅ FPS 计算：使用滑动窗口统计真实帧率
|
|||
|
|
const fpsFrameTimesRef = useRef<number[]>([])
|
|||
|
|
const [displayFps, setDisplayFps] = useState(0)
|
|||
|
|
|
|||
|
|
// ✅ 帧渲染控制：只保留最新帧，用 rAF 驱动渲染
|
|||
|
|
const latestFrameRef = useRef<any>(null)
|
|||
|
|
const rafIdRef = useRef<number>(0)
|
|||
|
|
const isRenderingRef = useRef(false)
|
|||
|
|
|
|||
|
|
// ✅ 添加控制权状态跟踪，避免重复申请
|
|||
|
|
const [isControlRequested, setIsControlRequested] = useState(false)
|
|||
|
|
const [currentWebSocket, setCurrentWebSocket] = useState<any>(null)
|
|||
|
|
const [lastControlRequestTime, setLastControlRequestTime] = useState<number>(0)
|
|||
|
|
|
|||
|
|
const { webSocket } = useSelector((state: RootState) => state.connection)
|
|||
|
|
const { connectedDevices } = useSelector((state: RootState) => state.devices)
|
|||
|
|
const { screenDisplay, operationEnabled } = useSelector((state: RootState) => state.ui)
|
|||
|
|
|
|||
|
|
const device = connectedDevices.find(d => d.id === deviceId)
|
|||
|
|
|
|||
|
|
// ✅ 监听屏幕数据的独立useEffect，避免与控制权逻辑混合
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!webSocket) return
|
|||
|
|
|
|||
|
|
const handleScreenData = (data: any) => {
|
|||
|
|
if (data.deviceId === deviceId) {
|
|||
|
|
// ✅ 只保存最新帧引用，不立即解码
|
|||
|
|
latestFrameRef.current = data
|
|||
|
|
setIsLoading(false)
|
|||
|
|
|
|||
|
|
// ✅ 如果没有正在进行的渲染循环，启动一个
|
|||
|
|
if (!isRenderingRef.current) {
|
|||
|
|
isRenderingRef.current = true
|
|||
|
|
renderLatestFrame()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
webSocket.on('screen_data', handleScreenData)
|
|||
|
|
|
|||
|
|
return () => {
|
|||
|
|
webSocket.off('screen_data', handleScreenData)
|
|||
|
|
// 清理 rAF
|
|||
|
|
if (rafIdRef.current) {
|
|||
|
|
cancelAnimationFrame(rafIdRef.current)
|
|||
|
|
rafIdRef.current = 0
|
|||
|
|
}
|
|||
|
|
isRenderingRef.current = false
|
|||
|
|
}
|
|||
|
|
}, [webSocket, deviceId])
|
|||
|
|
|
|||
|
|
// ✅ 控制权管理的独立useEffect，只在必要时申请/释放
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!webSocket || !deviceId) return
|
|||
|
|
|
|||
|
|
// 如果WebSocket实例发生变化，重置控制权状态
|
|||
|
|
if (currentWebSocket !== webSocket) {
|
|||
|
|
setIsControlRequested(false)
|
|||
|
|
setCurrentWebSocket(webSocket)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 只在未申请过控制权时申请，且防止重复发送
|
|||
|
|
if (!isControlRequested) {
|
|||
|
|
const now = Date.now()
|
|||
|
|
// 🔧 防止短时间内重复发送请求（2秒内只能发送一次）
|
|||
|
|
if (now - lastControlRequestTime < 2000) {
|
|||
|
|
console.log('⚠️ 控制权请求过于频繁，跳过')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log('🎮 申请设备控制权:', deviceId)
|
|||
|
|
setLastControlRequestTime(now)
|
|||
|
|
webSocket.emit('client_event', {
|
|||
|
|
type: 'REQUEST_DEVICE_CONTROL',
|
|||
|
|
data: { deviceId }
|
|||
|
|
})
|
|||
|
|
setIsControlRequested(true)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 监听控制权响应
|
|||
|
|
const handleControlResponse = (data: any) => {
|
|||
|
|
if (data.deviceId === deviceId) {
|
|||
|
|
if (data.success) {
|
|||
|
|
console.log('✅ 控制权获取成功:', deviceId)
|
|||
|
|
} else {
|
|||
|
|
console.warn('❌ 控制权获取失败:', data.message)
|
|||
|
|
// 如果失败，允许重新申请
|
|||
|
|
setIsControlRequested(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ✅ 监听控制错误，自动重新申请控制权
|
|||
|
|
const handleControlError = (data: any) => {
|
|||
|
|
if (data.deviceId === deviceId && data.error === 'NO_PERMISSION') {
|
|||
|
|
console.warn('⚠️ 检测到权限丢失，重新申请控制权:', deviceId)
|
|||
|
|
setIsControlRequested(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
webSocket.on('device_control_response', handleControlResponse)
|
|||
|
|
webSocket.on('control_error', handleControlError)
|
|||
|
|
|
|||
|
|
// 清理函数：只在组件卸载或deviceId变化时释放控制权
|
|||
|
|
return () => {
|
|||
|
|
webSocket.off('device_control_response', handleControlResponse)
|
|||
|
|
webSocket.off('control_error', handleControlError)
|
|||
|
|
|
|||
|
|
// 只有在已申请过控制权时才释放
|
|||
|
|
if (isControlRequested) {
|
|||
|
|
console.log('🔓 释放设备控制权:', deviceId)
|
|||
|
|
webSocket.emit('client_event', {
|
|||
|
|
type: 'RELEASE_DEVICE_CONTROL',
|
|||
|
|
data: { deviceId }
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, [webSocket, deviceId, isControlRequested, currentWebSocket]) // 🔧 不包含lastControlRequestTime避免重复执行
|
|||
|
|
|
|||
|
|
// ✅ rAF 驱动的渲染函数：取最新帧解码并绘制，一次只解码一帧
|
|||
|
|
const renderLatestFrame = useCallback(() => {
|
|||
|
|
const doRender = () => {
|
|||
|
|
const frameData = latestFrameRef.current
|
|||
|
|
if (!frameData) {
|
|||
|
|
isRenderingRef.current = false
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 取走帧数据，清空引用
|
|||
|
|
latestFrameRef.current = null
|
|||
|
|
|
|||
|
|
const canvas = canvasRef.current
|
|||
|
|
if (!canvas) {
|
|||
|
|
isRenderingRef.current = false
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!frameData?.data || !frameData?.format) {
|
|||
|
|
// 无效帧，检查是否有新帧等待
|
|||
|
|
if (latestFrameRef.current) {
|
|||
|
|
rafIdRef.current = requestAnimationFrame(doRender)
|
|||
|
|
} else {
|
|||
|
|
isRenderingRef.current = false
|
|||
|
|
}
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const img = new Image()
|
|||
|
|
|
|||
|
|
img.onload = () => {
|
|||
|
|
try {
|
|||
|
|
const ctx = canvas.getContext('2d')
|
|||
|
|
if (!ctx) {
|
|||
|
|
if (latestFrameRef.current) rafIdRef.current = requestAnimationFrame(doRender)
|
|||
|
|
else isRenderingRef.current = false
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ✅ 只在尺寸变化时才重设 canvas 尺寸（避免清空画布导致黑屏）
|
|||
|
|
if (canvas.width !== img.width || canvas.height !== img.height) {
|
|||
|
|
canvas.width = img.width
|
|||
|
|
canvas.height = img.height
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 直接绘制，覆盖上一帧
|
|||
|
|
switch (screenDisplay.fitMode) {
|
|||
|
|
case 'fit':
|
|||
|
|
drawFitMode(ctx, img, canvas)
|
|||
|
|
break
|
|||
|
|
case 'fill':
|
|||
|
|
drawFillMode(ctx, img, canvas)
|
|||
|
|
break
|
|||
|
|
case 'stretch':
|
|||
|
|
drawStretchMode(ctx, img, canvas)
|
|||
|
|
break
|
|||
|
|
case 'original':
|
|||
|
|
drawOriginalMode(ctx, img, canvas)
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新图片尺寸
|
|||
|
|
setImageSize(prev => {
|
|||
|
|
if (prev && prev.width === img.width && prev.height === img.height) return prev
|
|||
|
|
if (onScreenSizeChange) onScreenSizeChange({ width: img.width, height: img.height })
|
|||
|
|
return { width: img.width, height: img.height }
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// ✅ 更新FPS统计
|
|||
|
|
const now = Date.now()
|
|||
|
|
fpsFrameTimesRef.current.push(now)
|
|||
|
|
const cutoff = now - 2000
|
|||
|
|
fpsFrameTimesRef.current = fpsFrameTimesRef.current.filter(t => t > cutoff)
|
|||
|
|
setDisplayFps(Math.round(fpsFrameTimesRef.current.length / 2))
|
|||
|
|
|
|||
|
|
} catch (drawError) {
|
|||
|
|
console.error('绘制图像失败:', drawError)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 这帧画完了，检查是否有新帧等待
|
|||
|
|
if (latestFrameRef.current) {
|
|||
|
|
rafIdRef.current = requestAnimationFrame(doRender)
|
|||
|
|
} else {
|
|||
|
|
isRenderingRef.current = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
img.onerror = () => {
|
|||
|
|
console.error('图像加载失败')
|
|||
|
|
if (latestFrameRef.current) {
|
|||
|
|
rafIdRef.current = requestAnimationFrame(doRender)
|
|||
|
|
} else {
|
|||
|
|
isRenderingRef.current = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设置图像数据源
|
|||
|
|
if (typeof frameData.data === 'string') {
|
|||
|
|
img.src = `data:image/${frameData.format.toLowerCase()};base64,${frameData.data}`
|
|||
|
|
} else {
|
|||
|
|
const blob = new Blob([frameData.data], { type: `image/${frameData.format.toLowerCase()}` })
|
|||
|
|
const url = URL.createObjectURL(blob)
|
|||
|
|
const origOnload = img.onload as (() => void)
|
|||
|
|
img.onload = () => {
|
|||
|
|
URL.revokeObjectURL(url)
|
|||
|
|
origOnload()
|
|||
|
|
}
|
|||
|
|
img.src = url
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
doRender()
|
|||
|
|
}, [screenDisplay.fitMode])
|
|||
|
|
|
|||
|
|
const drawFitMode = (ctx: CanvasRenderingContext2D, img: HTMLImageElement, canvas: HTMLCanvasElement) => {
|
|||
|
|
const scale = Math.min(canvas.width / img.width, canvas.height / img.height)
|
|||
|
|
const x = (canvas.width - img.width * scale) / 2
|
|||
|
|
const y = (canvas.height - img.height * scale) / 2
|
|||
|
|
ctx.drawImage(img, x, y, img.width * scale, img.height * scale)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const drawFillMode = (ctx: CanvasRenderingContext2D, img: HTMLImageElement, canvas: HTMLCanvasElement) => {
|
|||
|
|
const scale = Math.max(canvas.width / img.width, canvas.height / img.height)
|
|||
|
|
const x = (canvas.width - img.width * scale) / 2
|
|||
|
|
const y = (canvas.height - img.height * scale) / 2
|
|||
|
|
ctx.drawImage(img, x, y, img.width * scale, img.height * scale)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const drawStretchMode = (ctx: CanvasRenderingContext2D, img: HTMLImageElement, canvas: HTMLCanvasElement) => {
|
|||
|
|
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const drawOriginalMode = (ctx: CanvasRenderingContext2D, img: HTMLImageElement, canvas: HTMLCanvasElement) => {
|
|||
|
|
const x = (canvas.width - img.width) / 2
|
|||
|
|
const y = (canvas.height - img.height) / 2
|
|||
|
|
ctx.drawImage(img, x, y)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 坐标转换函数：将canvas坐标转换为设备坐标
|
|||
|
|
const convertCanvasToDeviceCoords = useCallback((canvasX: number, canvasY: number, canvas: HTMLCanvasElement, device: any) => {
|
|||
|
|
if (!device) return null
|
|||
|
|
|
|||
|
|
const deviceWidth = device.screenWidth
|
|||
|
|
const deviceHeight = device.screenHeight
|
|||
|
|
|
|||
|
|
// 使用canvas的实际显示尺寸，而不是内部分辨率
|
|||
|
|
const rect = canvas.getBoundingClientRect()
|
|||
|
|
const canvasWidth = rect.width
|
|||
|
|
const canvasHeight = rect.height
|
|||
|
|
|
|||
|
|
let imageX: number, imageY: number, imageWidth: number, imageHeight: number
|
|||
|
|
|
|||
|
|
// 由于canvas使用了objectFit: 'contain'，浏览器会自动保持宽高比
|
|||
|
|
// 我们需要计算图像在canvas中的实际显示位置和尺寸
|
|||
|
|
const scale = Math.min(canvasWidth / deviceWidth, canvasHeight / deviceHeight)
|
|||
|
|
imageWidth = deviceWidth * scale
|
|||
|
|
imageHeight = deviceHeight * scale
|
|||
|
|
imageX = (canvasWidth - imageWidth) / 2
|
|||
|
|
imageY = (canvasHeight - imageHeight) / 2
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 检查点击是否在图像区域内
|
|||
|
|
if (canvasX < imageX || canvasX > imageX + imageWidth ||
|
|||
|
|
canvasY < imageY || canvasY > imageY + imageHeight) {
|
|||
|
|
console.warn('点击在图像区域外')
|
|||
|
|
return null // 点击在图像区域外
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 将canvas坐标转换为图像内的相对坐标
|
|||
|
|
const relativeX = canvasX - imageX
|
|||
|
|
const relativeY = canvasY - imageY
|
|||
|
|
|
|||
|
|
// 转换为设备坐标
|
|||
|
|
const deviceX = (relativeX / imageWidth) * deviceWidth
|
|||
|
|
const deviceY = (relativeY / imageHeight) * deviceHeight
|
|||
|
|
|
|||
|
|
console.log('deviceX', deviceX)
|
|||
|
|
console.log('deviceY', deviceY)
|
|||
|
|
// 确保坐标在设备范围内
|
|||
|
|
const clampedX = Math.max(0, Math.min(deviceWidth - 1, deviceX))
|
|||
|
|
const clampedY = Math.max(0, Math.min(deviceHeight - 1, deviceY))
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
return { x: clampedX, y: clampedY }
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
// const handleMouseEvent = useCallback((event: React.MouseEvent, action: string) => {
|
|||
|
|
// if (!webSocket || !device) return
|
|||
|
|
|
|||
|
|
// const canvas = canvasRef.current
|
|||
|
|
// if (!canvas) return
|
|||
|
|
|
|||
|
|
// const rect = canvas.getBoundingClientRect()
|
|||
|
|
// const canvasX = event.clientX - rect.left
|
|||
|
|
// const canvasY = event.clientY - rect.top
|
|||
|
|
|
|||
|
|
// // 根据显示模式计算正确的设备坐标
|
|||
|
|
// const deviceCoords = convertCanvasToDeviceCoords(canvasX, canvasY, canvas, device)
|
|||
|
|
|
|||
|
|
// if (!deviceCoords) {
|
|||
|
|
// console.warn('无法转换坐标，可能点击在图像区域外')
|
|||
|
|
// return
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// console.log(`点击位置转换: Canvas(${canvasX.toFixed(1)}, ${canvasY.toFixed(1)}) -> Device(${deviceCoords.x.toFixed(1)}, ${deviceCoords.y.toFixed(1)})`)
|
|||
|
|
|
|||
|
|
// webSocket.emit('control_message', {
|
|||
|
|
// type: action,
|
|||
|
|
// deviceId,
|
|||
|
|
// data: { x: deviceCoords.x, y: deviceCoords.y },
|
|||
|
|
// timestamp: Date.now()
|
|||
|
|
// })
|
|||
|
|
|
|||
|
|
// // 显示触摸指示器
|
|||
|
|
// if (screenDisplay.showTouchIndicator) {
|
|||
|
|
// showTouchIndicator(canvasX, canvasY)
|
|||
|
|
// }
|
|||
|
|
// }, [webSocket, device, deviceId, screenDisplay.showTouchIndicator, convertCanvasToDeviceCoords])
|
|||
|
|
|
|||
|
|
const showTouchIndicator = (x: number, y: number) => {
|
|||
|
|
const indicator = document.createElement('div')
|
|||
|
|
indicator.style.position = 'absolute'
|
|||
|
|
indicator.style.left = `${x - 10}px`
|
|||
|
|
indicator.style.top = `${y - 10}px`
|
|||
|
|
indicator.style.width = '20px'
|
|||
|
|
indicator.style.height = '20px'
|
|||
|
|
indicator.style.borderRadius = '50%'
|
|||
|
|
indicator.style.backgroundColor = 'rgba(24, 144, 255, 0.6)'
|
|||
|
|
indicator.style.border = '2px solid #1890ff'
|
|||
|
|
indicator.style.pointerEvents = 'none'
|
|||
|
|
indicator.style.zIndex = '1000'
|
|||
|
|
|
|||
|
|
const container = canvasRef.current?.parentElement
|
|||
|
|
if (container) {
|
|||
|
|
container.style.position = 'relative'
|
|||
|
|
container.appendChild(indicator)
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
container.removeChild(indicator)
|
|||
|
|
}, 500)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const showSwipeIndicator = (startX: number, startY: number, endX: number, endY: number) => {
|
|||
|
|
const container = canvasRef.current?.parentElement
|
|||
|
|
if (!container) return
|
|||
|
|
|
|||
|
|
// 创建滑动轨迹线
|
|||
|
|
const line = document.createElement('div')
|
|||
|
|
const length = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2))
|
|||
|
|
const angle = Math.atan2(endY - startY, endX - startX) * 180 / Math.PI
|
|||
|
|
|
|||
|
|
line.style.position = 'absolute'
|
|||
|
|
line.style.left = `${startX}px`
|
|||
|
|
line.style.top = `${startY}px`
|
|||
|
|
line.style.width = `${length}px`
|
|||
|
|
line.style.height = '2px'
|
|||
|
|
line.style.backgroundColor = '#ff4d4f'
|
|||
|
|
line.style.transformOrigin = '0 50%'
|
|||
|
|
line.style.transform = `rotate(${angle}deg)`
|
|||
|
|
line.style.pointerEvents = 'none'
|
|||
|
|
line.style.zIndex = '1000'
|
|||
|
|
|
|||
|
|
// 创建箭头
|
|||
|
|
const arrow = document.createElement('div')
|
|||
|
|
arrow.style.position = 'absolute'
|
|||
|
|
arrow.style.left = `${endX - 5}px`
|
|||
|
|
arrow.style.top = `${endY - 5}px`
|
|||
|
|
arrow.style.width = '10px'
|
|||
|
|
arrow.style.height = '10px'
|
|||
|
|
arrow.style.backgroundColor = '#ff4d4f'
|
|||
|
|
arrow.style.transform = 'rotate(45deg)'
|
|||
|
|
arrow.style.pointerEvents = 'none'
|
|||
|
|
arrow.style.zIndex = '1000'
|
|||
|
|
|
|||
|
|
container.style.position = 'relative'
|
|||
|
|
container.appendChild(line)
|
|||
|
|
container.appendChild(arrow)
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (container.contains(line)) container.removeChild(line)
|
|||
|
|
if (container.contains(arrow)) container.removeChild(arrow)
|
|||
|
|
}, 800)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const showLongPressIndicator = (x: number, y: number) => {
|
|||
|
|
const indicator = document.createElement('div')
|
|||
|
|
indicator.style.position = 'absolute'
|
|||
|
|
indicator.style.left = `${x - 15}px`
|
|||
|
|
indicator.style.top = `${y - 15}px`
|
|||
|
|
indicator.style.width = '30px'
|
|||
|
|
indicator.style.height = '30px'
|
|||
|
|
indicator.style.borderRadius = '50%'
|
|||
|
|
indicator.style.backgroundColor = 'rgba(255, 77, 79, 0.6)'
|
|||
|
|
indicator.style.border = '3px solid #ff4d4f'
|
|||
|
|
indicator.style.pointerEvents = 'none'
|
|||
|
|
indicator.style.zIndex = '1000'
|
|||
|
|
indicator.style.animation = 'pulse 1s infinite'
|
|||
|
|
|
|||
|
|
const container = canvasRef.current?.parentElement
|
|||
|
|
if (container) {
|
|||
|
|
container.style.position = 'relative'
|
|||
|
|
container.appendChild(indicator)
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (container.contains(indicator)) {
|
|||
|
|
container.removeChild(indicator)
|
|||
|
|
}
|
|||
|
|
}, 1000)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 🆕 显示长按拖拽开始指示器
|
|||
|
|
const showLongPressDragStartIndicator = (x: number, y: number) => {
|
|||
|
|
const container = canvasRef.current?.parentElement
|
|||
|
|
if (!container) return
|
|||
|
|
|
|||
|
|
// 创建长按拖拽开始指示器（较大的圆圈，橙色）
|
|||
|
|
const indicator = document.createElement('div')
|
|||
|
|
indicator.style.position = 'absolute'
|
|||
|
|
indicator.style.left = `${x - 20}px`
|
|||
|
|
indicator.style.top = `${y - 20}px`
|
|||
|
|
indicator.style.width = '40px'
|
|||
|
|
indicator.style.height = '40px'
|
|||
|
|
indicator.style.borderRadius = '50%'
|
|||
|
|
indicator.style.backgroundColor = 'rgba(255, 165, 0, 0.7)'
|
|||
|
|
indicator.style.border = '4px solid #ff8c00'
|
|||
|
|
indicator.style.pointerEvents = 'none'
|
|||
|
|
indicator.style.zIndex = '1000'
|
|||
|
|
indicator.style.animation = 'pulse 0.8s infinite'
|
|||
|
|
indicator.className = 'long-press-drag-start'
|
|||
|
|
|
|||
|
|
// 添加文字标识
|
|||
|
|
const label = document.createElement('div')
|
|||
|
|
label.style.position = 'absolute'
|
|||
|
|
label.style.left = '50%'
|
|||
|
|
label.style.top = '50%'
|
|||
|
|
label.style.transform = 'translate(-50%, -50%)'
|
|||
|
|
label.style.fontSize = '10px'
|
|||
|
|
label.style.fontWeight = 'bold'
|
|||
|
|
label.style.color = '#fff'
|
|||
|
|
label.style.textShadow = '1px 1px 2px rgba(0,0,0,0.8)'
|
|||
|
|
label.textContent = '拖'
|
|||
|
|
indicator.appendChild(label)
|
|||
|
|
|
|||
|
|
container.style.position = 'relative'
|
|||
|
|
container.appendChild(indicator)
|
|||
|
|
|
|||
|
|
return indicator
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 🆕 显示长按拖拽路径指示器
|
|||
|
|
const showLongPressDragPath = (startX: number, startY: number, endX: number, endY: number) => {
|
|||
|
|
const container = canvasRef.current?.parentElement
|
|||
|
|
if (!container) return
|
|||
|
|
|
|||
|
|
// 清除之前的拖拽开始指示器
|
|||
|
|
const existingIndicator = container.querySelector('.long-press-drag-start')
|
|||
|
|
if (existingIndicator) {
|
|||
|
|
container.removeChild(existingIndicator)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 创建拖拽路径线（粗一些，橙色渐变）
|
|||
|
|
const line = document.createElement('div')
|
|||
|
|
const length = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2))
|
|||
|
|
const angle = Math.atan2(endY - startY, endX - startX) * 180 / Math.PI
|
|||
|
|
|
|||
|
|
line.style.position = 'absolute'
|
|||
|
|
line.style.left = `${startX}px`
|
|||
|
|
line.style.top = `${startY}px`
|
|||
|
|
line.style.width = `${length}px`
|
|||
|
|
line.style.height = '4px'
|
|||
|
|
line.style.background = 'linear-gradient(to right, #ff8c00, #ff6347)'
|
|||
|
|
line.style.transformOrigin = '0 50%'
|
|||
|
|
line.style.transform = `rotate(${angle}deg)`
|
|||
|
|
line.style.pointerEvents = 'none'
|
|||
|
|
line.style.zIndex = '999'
|
|||
|
|
line.style.boxShadow = '0 0 6px rgba(255, 140, 0, 0.6)'
|
|||
|
|
|
|||
|
|
// 创建起始点指示器
|
|||
|
|
const startIndicator = document.createElement('div')
|
|||
|
|
startIndicator.style.position = 'absolute'
|
|||
|
|
startIndicator.style.left = `${startX - 8}px`
|
|||
|
|
startIndicator.style.top = `${startY - 8}px`
|
|||
|
|
startIndicator.style.width = '16px'
|
|||
|
|
startIndicator.style.height = '16px'
|
|||
|
|
startIndicator.style.borderRadius = '50%'
|
|||
|
|
startIndicator.style.backgroundColor = '#ff8c00'
|
|||
|
|
startIndicator.style.border = '2px solid #fff'
|
|||
|
|
startIndicator.style.pointerEvents = 'none'
|
|||
|
|
startIndicator.style.zIndex = '1001'
|
|||
|
|
|
|||
|
|
// 创建结束点指示器（带箭头）
|
|||
|
|
const endIndicator = document.createElement('div')
|
|||
|
|
endIndicator.style.position = 'absolute'
|
|||
|
|
endIndicator.style.left = `${endX - 12}px`
|
|||
|
|
endIndicator.style.top = `${endY - 12}px`
|
|||
|
|
endIndicator.style.width = '24px'
|
|||
|
|
endIndicator.style.height = '24px'
|
|||
|
|
endIndicator.style.borderRadius = '50%'
|
|||
|
|
endIndicator.style.backgroundColor = '#ff6347'
|
|||
|
|
endIndicator.style.border = '3px solid #fff'
|
|||
|
|
endIndicator.style.pointerEvents = 'none'
|
|||
|
|
endIndicator.style.zIndex = '1001'
|
|||
|
|
endIndicator.style.boxShadow = '0 0 8px rgba(255, 99, 71, 0.8)'
|
|||
|
|
|
|||
|
|
// 添加箭头图标
|
|||
|
|
const arrow = document.createElement('div')
|
|||
|
|
arrow.style.position = 'absolute'
|
|||
|
|
arrow.style.left = '50%'
|
|||
|
|
arrow.style.top = '50%'
|
|||
|
|
arrow.style.transform = 'translate(-50%, -50%)'
|
|||
|
|
arrow.style.fontSize = '12px'
|
|||
|
|
arrow.style.color = '#fff'
|
|||
|
|
arrow.style.fontWeight = 'bold'
|
|||
|
|
arrow.textContent = '→'
|
|||
|
|
endIndicator.appendChild(arrow)
|
|||
|
|
|
|||
|
|
container.style.position = 'relative'
|
|||
|
|
container.appendChild(line)
|
|||
|
|
container.appendChild(startIndicator)
|
|||
|
|
container.appendChild(endIndicator)
|
|||
|
|
|
|||
|
|
// 1.5秒后清除指示器
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (container.contains(line)) container.removeChild(line)
|
|||
|
|
if (container.contains(startIndicator)) container.removeChild(startIndicator)
|
|||
|
|
if (container.contains(endIndicator)) container.removeChild(endIndicator)
|
|||
|
|
}, 1500)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 添加滑动处理
|
|||
|
|
const [isDragging, setIsDragging] = useState(false)
|
|||
|
|
const [dragStart, setDragStart] = useState<{x: number, y: number} | null>(null)
|
|||
|
|
|
|||
|
|
// 🆕 添加长按处理
|
|||
|
|
const [isLongPressTriggered, setIsLongPressTriggered] = useState(false)
|
|||
|
|
const longPressTimerRef = useRef<number | null>(null)
|
|||
|
|
|
|||
|
|
// 🆕 添加长按拖拽处理状态
|
|||
|
|
const [isLongPressDragging, setIsLongPressDragging] = useState(false)
|
|||
|
|
const [longPressDragStartPos, setLongPressDragStartPos] = useState<{x: number, y: number} | null>(null)
|
|||
|
|
|
|||
|
|
// 🆕 添加拖拽路径收集状态
|
|||
|
|
const [dragPath, setDragPath] = useState<Array<{x: number, y: number}>>([])
|
|||
|
|
const lastMoveTimeRef = useRef<number>(0)
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 处理真正的点击（从mouseUp中调用）
|
|||
|
|
const performClick = useCallback((canvasX: number, canvasY: number) => {
|
|||
|
|
if (!webSocket || !device) return
|
|||
|
|
|
|||
|
|
// 检查操作是否被允许
|
|||
|
|
if (!operationEnabled) {
|
|||
|
|
console.warn('屏幕点击操作已被阻止')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const canvas = canvasRef.current
|
|||
|
|
if (!canvas) return
|
|||
|
|
|
|||
|
|
const deviceCoords = convertCanvasToDeviceCoords(canvasX, canvasY, canvas, device)
|
|||
|
|
|
|||
|
|
if (!deviceCoords) {
|
|||
|
|
console.warn('无法转换坐标，可能点击在图像区域外')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
webSocket.emit('control_message', {
|
|||
|
|
type: 'CLICK',
|
|||
|
|
deviceId,
|
|||
|
|
data: { x: deviceCoords.x, y: deviceCoords.y },
|
|||
|
|
timestamp: Date.now()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 显示触摸指示器
|
|||
|
|
if (screenDisplay.showTouchIndicator) {
|
|||
|
|
showTouchIndicator(canvasX, canvasY)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
}, [webSocket, device, deviceId, screenDisplay.showTouchIndicator, convertCanvasToDeviceCoords, operationEnabled])
|
|||
|
|
|
|||
|
|
// 🆕 处理长按操作
|
|||
|
|
const performLongPress = useCallback((canvasX: number, canvasY: number) => {
|
|||
|
|
if (!webSocket || !device) return
|
|||
|
|
|
|||
|
|
// 检查操作是否被允许
|
|||
|
|
if (!operationEnabled) {
|
|||
|
|
console.warn('屏幕长按操作已被阻止')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const canvas = canvasRef.current
|
|||
|
|
if (!canvas) return
|
|||
|
|
|
|||
|
|
const deviceCoords = convertCanvasToDeviceCoords(canvasX, canvasY, canvas, device)
|
|||
|
|
|
|||
|
|
if (!deviceCoords) {
|
|||
|
|
console.warn('无法转换坐标，可能长按在图像区域外')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log(`长按操作: Canvas(${canvasX.toFixed(1)}, ${canvasY.toFixed(1)}) -> Device(${deviceCoords.x.toFixed(1)}, ${deviceCoords.y.toFixed(1)})`)
|
|||
|
|
|
|||
|
|
webSocket.emit('control_message', {
|
|||
|
|
type: 'LONG_PRESS',
|
|||
|
|
deviceId,
|
|||
|
|
data: { x: deviceCoords.x, y: deviceCoords.y },
|
|||
|
|
timestamp: Date.now()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 显示长按指示器（使用不同颜色区分）
|
|||
|
|
if (screenDisplay.showTouchIndicator) {
|
|||
|
|
showLongPressIndicator(canvasX, canvasY)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}, [webSocket, device, deviceId, screenDisplay.showTouchIndicator, convertCanvasToDeviceCoords, operationEnabled])
|
|||
|
|
|
|||
|
|
const handleMouseDown = useCallback((event: React.MouseEvent) => {
|
|||
|
|
event.preventDefault()
|
|||
|
|
setIsDragging(true)
|
|||
|
|
|
|||
|
|
const canvas = canvasRef.current
|
|||
|
|
if (!canvas) return
|
|||
|
|
|
|||
|
|
const rect = canvas.getBoundingClientRect()
|
|||
|
|
const startX = event.clientX - rect.left
|
|||
|
|
const startY = event.clientY - rect.top
|
|||
|
|
|
|||
|
|
setDragStart({ x: startX, y: startY })
|
|||
|
|
|
|||
|
|
// 🆕 启动长按计时器
|
|||
|
|
setIsLongPressTriggered(false)
|
|||
|
|
setIsLongPressDragging(false)
|
|||
|
|
setLongPressDragStartPos(null)
|
|||
|
|
setDragPath([]) // 🔧 清理拖拽路径
|
|||
|
|
longPressTimerRef.current = window.setTimeout(() => {
|
|||
|
|
setIsLongPressTriggered(true)
|
|||
|
|
// 🆕 长按触发后不立即执行操作，而是准备进入拖拽模式
|
|||
|
|
console.log('长按触发，准备进入拖拽模式')
|
|||
|
|
}, 500) // 500ms 后触发长按
|
|||
|
|
}, [performLongPress])
|
|||
|
|
|
|||
|
|
const handleMouseMove = useCallback((event: React.MouseEvent) => {
|
|||
|
|
if (!isDragging || !dragStart) return
|
|||
|
|
|
|||
|
|
event.preventDefault()
|
|||
|
|
|
|||
|
|
// 🆕 处理长按拖拽逻辑 - 优化为连续手势
|
|||
|
|
if (isLongPressTriggered && !isLongPressDragging) {
|
|||
|
|
// 长按已触发，用户开始拖拽，进入长按拖拽模式
|
|||
|
|
if (!webSocket || !device || !operationEnabled) return
|
|||
|
|
|
|||
|
|
const canvas = canvasRef.current
|
|||
|
|
if (!canvas) return
|
|||
|
|
|
|||
|
|
// 转换开始位置为设备坐标
|
|||
|
|
const startCoords = convertCanvasToDeviceCoords(dragStart.x, dragStart.y, canvas, device)
|
|||
|
|
if (!startCoords) return
|
|||
|
|
|
|||
|
|
setIsLongPressDragging(true)
|
|||
|
|
setLongPressDragStartPos(startCoords)
|
|||
|
|
|
|||
|
|
// 🔧 优化：初始化拖拽路径，包含起始点
|
|||
|
|
setDragPath([startCoords])
|
|||
|
|
|
|||
|
|
// 🆕 显示长按拖拽开始指示器
|
|||
|
|
if (screenDisplay.showTouchIndicator) {
|
|||
|
|
showLongPressDragStartIndicator(dragStart.x, dragStart.y)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log(`长按拖拽开始: Device(${startCoords.x.toFixed(1)}, ${startCoords.y.toFixed(1)})`)
|
|||
|
|
} else if (isLongPressDragging) {
|
|||
|
|
// 🔧 优化：收集拖拽路径点，而不是立即发送消息
|
|||
|
|
const now = Date.now()
|
|||
|
|
|
|||
|
|
// 频率控制：每50ms最多记录一个点，避免路径过密
|
|||
|
|
if (now - lastMoveTimeRef.current < 50) return
|
|||
|
|
|
|||
|
|
const canvas = canvasRef.current
|
|||
|
|
if (!canvas) return
|
|||
|
|
|
|||
|
|
const rect = canvas.getBoundingClientRect()
|
|||
|
|
const currentX = event.clientX - rect.left
|
|||
|
|
const currentY = event.clientY - rect.top
|
|||
|
|
|
|||
|
|
const currentCoords = convertCanvasToDeviceCoords(currentX, currentY, canvas, device)
|
|||
|
|
if (!currentCoords) return
|
|||
|
|
|
|||
|
|
// 添加当前点到路径中
|
|||
|
|
setDragPath(prevPath => {
|
|||
|
|
const newPath = [...prevPath, currentCoords]
|
|||
|
|
// 限制路径点数量，避免内存占用过大
|
|||
|
|
return newPath.length > 100 ? [newPath[0], ...newPath.slice(-99)] : newPath
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
lastMoveTimeRef.current = now
|
|||
|
|
console.debug(`长按拖拽路径收集: Device(${currentCoords.x.toFixed(1)}, ${currentCoords.y.toFixed(1)})`)
|
|||
|
|
}
|
|||
|
|
}, [isDragging, dragStart, isLongPressTriggered, isLongPressDragging, webSocket, device, deviceId, operationEnabled, convertCanvasToDeviceCoords, screenDisplay.showTouchIndicator, dragPath])
|
|||
|
|
|
|||
|
|
const handleMouseUp = useCallback((event: React.MouseEvent) => {
|
|||
|
|
if (!isDragging || !dragStart) return
|
|||
|
|
|
|||
|
|
event.preventDefault()
|
|||
|
|
setIsDragging(false)
|
|||
|
|
|
|||
|
|
// 🆕 清理长按计时器
|
|||
|
|
if (longPressTimerRef.current) {
|
|||
|
|
clearTimeout(longPressTimerRef.current)
|
|||
|
|
longPressTimerRef.current = null
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 🆕 处理长按相关操作
|
|||
|
|
if (isLongPressTriggered) {
|
|||
|
|
if (isLongPressDragging) {
|
|||
|
|
// 🔧 优化：执行完整的长按拖拽手势
|
|||
|
|
if (webSocket && device && operationEnabled && longPressDragStartPos && dragPath.length > 0) {
|
|||
|
|
const canvas = canvasRef.current
|
|||
|
|
if (canvas) {
|
|||
|
|
const rect = canvas.getBoundingClientRect()
|
|||
|
|
const endX = event.clientX - rect.left
|
|||
|
|
const endY = event.clientY - rect.top
|
|||
|
|
|
|||
|
|
const endCoords = convertCanvasToDeviceCoords(endX, endY, canvas, device)
|
|||
|
|
if (endCoords) {
|
|||
|
|
// 将结束点添加到路径中
|
|||
|
|
const completePath = [...dragPath, endCoords]
|
|||
|
|
|
|||
|
|
// 发送包含完整路径的长按拖拽消息
|
|||
|
|
webSocket.emit('control_message', {
|
|||
|
|
type: 'LONG_PRESS_DRAG',
|
|||
|
|
deviceId,
|
|||
|
|
data: {
|
|||
|
|
path: completePath,
|
|||
|
|
startX: completePath[0].x,
|
|||
|
|
startY: completePath[0].y,
|
|||
|
|
endX: endCoords.x,
|
|||
|
|
endY: endCoords.y,
|
|||
|
|
duration: Math.max(2000, 1500 + completePath.length * 20) // 优化：为微移动长按预留更多时间
|
|||
|
|
},
|
|||
|
|
timestamp: Date.now()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
console.log(`长按拖拽完成: Device(${completePath[0].x.toFixed(1)}, ${completePath[0].y.toFixed(1)}) -> Device(${endCoords.x.toFixed(1)}, ${endCoords.y.toFixed(1)}), 路径点数: ${completePath.length}`)
|
|||
|
|
|
|||
|
|
// 🆕 显示长按拖拽路径指示器
|
|||
|
|
if (screenDisplay.showTouchIndicator) {
|
|||
|
|
showLongPressDragPath(dragStart.x, dragStart.y, endX, endY)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 长按已触发但没有拖拽，执行普通长按操作
|
|||
|
|
const canvas = canvasRef.current
|
|||
|
|
const rect = canvas?.getBoundingClientRect()
|
|||
|
|
if (rect) {
|
|||
|
|
const endX = event.clientX - rect.left
|
|||
|
|
const endY = event.clientY - rect.top
|
|||
|
|
performLongPress(endX, endY)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 清理长按拖拽相关状态
|
|||
|
|
setDragStart(null)
|
|||
|
|
setIsLongPressTriggered(false)
|
|||
|
|
setIsLongPressDragging(false)
|
|||
|
|
setLongPressDragStartPos(null)
|
|||
|
|
setDragPath([]) // 🔧 清理拖拽路径
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const canvas = canvasRef.current
|
|||
|
|
if (!canvas || !webSocket || !device) return
|
|||
|
|
|
|||
|
|
const rect = canvas.getBoundingClientRect()
|
|||
|
|
const endX = event.clientX - rect.left
|
|||
|
|
const endY = event.clientY - rect.top
|
|||
|
|
|
|||
|
|
// 计算移动距离
|
|||
|
|
const deltaX = Math.abs(endX - dragStart.x)
|
|||
|
|
const deltaY = Math.abs(endY - dragStart.y)
|
|||
|
|
const threshold = 10 // 增加阈值到10像素，避免误触
|
|||
|
|
|
|||
|
|
if (deltaX < threshold && deltaY < threshold) {
|
|||
|
|
// 小距离移动，当作点击处理
|
|||
|
|
performClick(endX, endY)
|
|||
|
|
} else {
|
|||
|
|
// 大距离移动，当作滑动处理
|
|||
|
|
|
|||
|
|
// 检查操作是否被允许
|
|||
|
|
if (!operationEnabled) {
|
|||
|
|
console.warn('屏幕滑动操作已被阻止')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 使用正确的坐标转换函数
|
|||
|
|
const startCoords = convertCanvasToDeviceCoords(dragStart.x, dragStart.y, canvas, device)
|
|||
|
|
const endCoords = convertCanvasToDeviceCoords(endX, endY, canvas, device)
|
|||
|
|
|
|||
|
|
if (!startCoords || !endCoords) {
|
|||
|
|
console.warn('滑动坐标转换失败，滑动可能在图像区域外')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
webSocket.emit('control_message', {
|
|||
|
|
type: 'SWIPE',
|
|||
|
|
deviceId,
|
|||
|
|
data: {
|
|||
|
|
startX: startCoords.x,
|
|||
|
|
startY: startCoords.y,
|
|||
|
|
endX: endCoords.x,
|
|||
|
|
endY: endCoords.y,
|
|||
|
|
duration: 300
|
|||
|
|
},
|
|||
|
|
timestamp: Date.now()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 显示滑动指示器
|
|||
|
|
if (screenDisplay.showTouchIndicator) {
|
|||
|
|
showSwipeIndicator(dragStart.x, dragStart.y, endX, endY)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setDragStart(null)
|
|||
|
|
}, [isDragging, dragStart, webSocket, device, deviceId, screenDisplay.showTouchIndicator, convertCanvasToDeviceCoords, performClick, operationEnabled, isLongPressTriggered, isLongPressDragging, longPressDragStartPos, performLongPress, dragPath])
|
|||
|
|
|
|||
|
|
// 处理鼠标离开画布
|
|||
|
|
const handleMouseLeave = useCallback(() => {
|
|||
|
|
setIsDragging(false)
|
|||
|
|
setDragStart(null)
|
|||
|
|
|
|||
|
|
// 🆕 清理长按计时器和状态
|
|||
|
|
if (longPressTimerRef.current) {
|
|||
|
|
clearTimeout(longPressTimerRef.current)
|
|||
|
|
longPressTimerRef.current = null
|
|||
|
|
}
|
|||
|
|
setIsLongPressTriggered(false)
|
|||
|
|
|
|||
|
|
// 🆕 清理长按拖拽相关状态
|
|||
|
|
setIsLongPressDragging(false)
|
|||
|
|
setLongPressDragStartPos(null)
|
|||
|
|
setDragPath([]) // 🔧 清理拖拽路径
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
if (!device) {
|
|||
|
|
return (
|
|||
|
|
<Card title="设备屏幕">
|
|||
|
|
<div style={{ textAlign: 'center', padding: '50px' }}>
|
|||
|
|
设备未找到
|
|||
|
|
</div>
|
|||
|
|
</Card>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
{/* 添加CSS动画 */}
|
|||
|
|
<style>
|
|||
|
|
{`
|
|||
|
|
@keyframes pulse {
|
|||
|
|
0% { opacity: 1; }
|
|||
|
|
50% { opacity: 0.6; }
|
|||
|
|
100% { opacity: 1; }
|
|||
|
|
}
|
|||
|
|
`}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
position: 'relative',
|
|||
|
|
width: '100%',
|
|||
|
|
height: '100%',
|
|||
|
|
display: 'flex',
|
|||
|
|
flexDirection: 'column',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
justifyContent: 'flex-start',
|
|||
|
|
overflow: 'hidden'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{/* 顶部信息栏 - 屏幕阅读器模式下隐藏 */}
|
|||
|
|
{!device?.screenReader?.enabled && (
|
|||
|
|
<div style={{
|
|||
|
|
position: 'absolute',
|
|||
|
|
top: '-10px',
|
|||
|
|
left: '20px',
|
|||
|
|
zIndex: 20,
|
|||
|
|
color: '#fff',
|
|||
|
|
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
|||
|
|
padding: '8px 16px',
|
|||
|
|
borderRadius: '4px',
|
|||
|
|
fontSize: '14px'
|
|||
|
|
}}>
|
|||
|
|
|
|||
|
|
<div style={{ fontSize: '12px', opacity: 0.8 }}>
|
|||
|
|
FPS: {displayFps}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 操作状态指示器 */}
|
|||
|
|
{!operationEnabled && (
|
|||
|
|
<div style={{
|
|||
|
|
position: 'absolute',
|
|||
|
|
top: '20px',
|
|||
|
|
right: '20px',
|
|||
|
|
zIndex: 20,
|
|||
|
|
color: '#fff',
|
|||
|
|
backgroundColor: 'rgba(255, 77, 79, 0.9)',
|
|||
|
|
padding: '8px 16px',
|
|||
|
|
borderRadius: '4px',
|
|||
|
|
fontSize: '14px',
|
|||
|
|
fontWeight: 'bold',
|
|||
|
|
border: '2px solid #ff4d4f',
|
|||
|
|
animation: 'pulse 2s infinite'
|
|||
|
|
}}>
|
|||
|
|
🔒 操作已禁用
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
{isLoading && (
|
|||
|
|
<div style={{
|
|||
|
|
position: 'absolute',
|
|||
|
|
top: '50%',
|
|||
|
|
left: '50%',
|
|||
|
|
transform: 'translate(-50%, -50%)',
|
|||
|
|
zIndex: 10
|
|||
|
|
}}>
|
|||
|
|
<Spin size="large" />
|
|||
|
|
<div style={{ color: '#fff', marginTop: '16px' }}>
|
|||
|
|
正在连接设备屏幕...
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<canvas
|
|||
|
|
ref={canvasRef}
|
|||
|
|
width={imageSize?.width || device?.screenWidth || 360}
|
|||
|
|
height={imageSize?.height || device?.screenHeight || 640}
|
|||
|
|
style={{
|
|||
|
|
width: imageSize ? `${imageSize.width}px` : '100%',
|
|||
|
|
height: imageSize ? `${imageSize.height}px` : 'auto',
|
|||
|
|
objectFit: 'none',
|
|||
|
|
cursor: 'pointer',
|
|||
|
|
display: 'block'
|
|||
|
|
}}
|
|||
|
|
onMouseDown={handleMouseDown}
|
|||
|
|
onMouseUp={handleMouseUp}
|
|||
|
|
onMouseMove={handleMouseMove}
|
|||
|
|
onMouseLeave={handleMouseLeave}
|
|||
|
|
onContextMenu={(e) => e.preventDefault()}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default DeviceScreen
|