diff --git a/src/App.tsx b/src/App.tsx index 14fe6b9..5b5082a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -25,6 +25,15 @@ function App() { const [isMobile, setIsMobile] = useState(false) const [mobileTab, setMobileTab] = useState(getInitialTab()) + // 功能菜单状态 + const [menuVisible, setMenuVisible] = useState(false) + const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 }) + const [currentInput, setCurrentInput] = useState<{ + value: string; + setter: React.Dispatch>; + readOnly: boolean + } | null>(null) + // 检测是否为移动设备 useEffect(() => { const checkMobile = () => { @@ -39,6 +48,73 @@ function App() { } }, []) + // 点击外部关闭菜单 + useEffect(() => { + const handleClickOutside = () => { + setMenuVisible(false) + } + + if (menuVisible) { + document.addEventListener('click', handleClickOutside) + } + + return () => { + document.removeEventListener('click', handleClickOutside) + } + }, [menuVisible]) + + // 打开功能菜单 + const openMenu = (e: React.MouseEvent | React.TouchEvent, value: string, setter: React.Dispatch>, readOnly: boolean) => { + e.preventDefault() + + let x = 0 + let y = 0 + + if ('clientX' in e) { + // 鼠标事件 + x = e.clientX + y = e.clientY + } else if ('touches' in e && e.touches.length > 0) { + // 触摸事件 + x = e.touches[0].clientX + y = e.touches[0].clientY + } + + setMenuPosition({ x, y }) + setCurrentInput({ value, setter, readOnly }) + setMenuVisible(true) + } + + // 清空输入 + const handleClear = () => { + if (currentInput) { + currentInput.setter('') + setMenuVisible(false) + } + } + + // 复制全部 + const handleCopyAll = () => { + if (currentInput && currentInput.value) { + navigator.clipboard.writeText(currentInput.value).catch(err => { + console.error('复制失败:', err) + }) + setMenuVisible(false) + } + } + + // 粘贴覆盖 + const handlePaste = () => { + if (currentInput && !currentInput.readOnly) { + navigator.clipboard.readText().then(text => { + currentInput.setter(text) + }).catch(err => { + console.error('粘贴失败:', err) + }) + setMenuVisible(false) + } + } + // 处理移动设备的 tab 切换 const handleMobileTabChange = (e: React.ChangeEvent) => { const tab = e.target.value @@ -471,6 +547,13 @@ function App() {