purewhiter--mobilegym
wehub-resource-sync
953 行
33 KiB
TypeScript
953 行
33 KiB
TypeScript
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||
import { SIMULATOR_CONFIG } from '../data';
|
||
const { zIndexKeyboard, keyboardHeight } = SIMULATOR_CONFIG.framework;
|
||
import { KeyboardService, type KeyboardMode } from '../keyboard/KeyboardService';
|
||
import { getZhCandidates } from '../keyboard/pinyinIme';
|
||
import { realNow } from '../TimeService';
|
||
|
||
type EditableEl = HTMLInputElement | HTMLTextAreaElement | HTMLElement;
|
||
|
||
const NON_TEXT_INPUT_TYPES = new Set([
|
||
'checkbox', 'radio', 'range', 'color', 'file',
|
||
'button', 'submit', 'reset', 'image', 'hidden',
|
||
]);
|
||
|
||
function isEditableElement(el: any): el is EditableEl {
|
||
if (!el || !(el instanceof HTMLElement)) return false;
|
||
if (el instanceof HTMLInputElement)
|
||
return !el.disabled && !el.readOnly && !NON_TEXT_INPUT_TYPES.has(el.type) && el.inputMode !== 'none';
|
||
if (el instanceof HTMLTextAreaElement) return !el.disabled && !el.readOnly;
|
||
return el.isContentEditable === true;
|
||
}
|
||
|
||
function getActiveEditable(): EditableEl | null {
|
||
const el = document.activeElement as any;
|
||
return isEditableElement(el) ? el : null;
|
||
}
|
||
|
||
function setNativeValue(el: HTMLInputElement | HTMLTextAreaElement, value: string) {
|
||
let proto: any = Object.getPrototypeOf(el);
|
||
while (proto) {
|
||
const desc = Object.getOwnPropertyDescriptor(proto, 'value');
|
||
if (desc && typeof desc.set === 'function') {
|
||
desc.set.call(el, value);
|
||
return;
|
||
}
|
||
proto = Object.getPrototypeOf(proto);
|
||
}
|
||
(el as any).value = value;
|
||
}
|
||
|
||
function dispatchInput(el: HTMLElement) {
|
||
try {
|
||
el.dispatchEvent(new Event('input', { bubbles: true }));
|
||
} catch {
|
||
// ignore
|
||
}
|
||
}
|
||
|
||
function insertText(text: string) {
|
||
const el = getActiveEditable();
|
||
if (!el) return;
|
||
|
||
if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
|
||
const value = String(el.value ?? '');
|
||
const start = typeof el.selectionStart === 'number' ? el.selectionStart : value.length;
|
||
const end = typeof el.selectionEnd === 'number' ? el.selectionEnd : start;
|
||
const next = value.slice(0, start) + text + value.slice(end);
|
||
setNativeValue(el, next);
|
||
try {
|
||
const caret = start + text.length;
|
||
el.setSelectionRange(caret, caret);
|
||
} catch {
|
||
// ignore
|
||
}
|
||
dispatchInput(el);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
document.execCommand('insertText', false, text);
|
||
} catch {
|
||
el.textContent = (el.textContent || '') + text;
|
||
dispatchInput(el);
|
||
}
|
||
}
|
||
|
||
function deleteBackward() {
|
||
const el = getActiveEditable();
|
||
if (!el) return;
|
||
|
||
if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
|
||
const value = String(el.value ?? '');
|
||
const start = typeof el.selectionStart === 'number' ? el.selectionStart : value.length;
|
||
const end = typeof el.selectionEnd === 'number' ? el.selectionEnd : start;
|
||
if (start !== end) {
|
||
const next = value.slice(0, start) + value.slice(end);
|
||
setNativeValue(el, next);
|
||
try {
|
||
el.setSelectionRange(start, start);
|
||
} catch {
|
||
// ignore
|
||
}
|
||
dispatchInput(el);
|
||
return;
|
||
}
|
||
if (start <= 0) return;
|
||
const next = value.slice(0, start - 1) + value.slice(start);
|
||
setNativeValue(el, next);
|
||
try {
|
||
el.setSelectionRange(start - 1, start - 1);
|
||
} catch {
|
||
// ignore
|
||
}
|
||
dispatchInput(el);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
document.execCommand('delete', false);
|
||
} catch {
|
||
const t = el.textContent || '';
|
||
el.textContent = t.slice(0, -1);
|
||
dispatchInput(el);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 向上查找最近的可滚动容器
|
||
*/
|
||
function findScrollContainer(element: HTMLElement): HTMLElement | null {
|
||
let current: HTMLElement | null = element.parentElement;
|
||
while (current) {
|
||
const style = window.getComputedStyle(current);
|
||
const overflowY = style.overflowY;
|
||
if (overflowY === 'auto' || overflowY === 'scroll') {
|
||
return current;
|
||
}
|
||
// 也检查 data-scroll-container 属性
|
||
if (current.dataset.scrollContainer) {
|
||
return current;
|
||
}
|
||
current = current.parentElement;
|
||
}
|
||
return null;
|
||
}
|
||
|
||
/**
|
||
* 执行智能滚动：模拟 Android ScrollView.requestChildRectangleOnScreen()。
|
||
* 最小滚动量，刚好让焦点输入框在可见区域底部露出。
|
||
* 优先使用 adjustResize wrapper 的 bounds（准确反映可见区域），
|
||
* 回退到 window.innerHeight - keyboardHeight。
|
||
*/
|
||
function doSmartScroll(target: HTMLElement, keyboardHeight: number) {
|
||
const rect = target.getBoundingClientRect();
|
||
|
||
const wrapper = target.closest('[data-adjust-resize]') as HTMLElement | null;
|
||
const visibleBottom = wrapper
|
||
? wrapper.getBoundingClientRect().bottom
|
||
: window.innerHeight - keyboardHeight;
|
||
|
||
if (rect.bottom > visibleBottom) {
|
||
const scrollContainer = findScrollContainer(target);
|
||
if (scrollContainer) {
|
||
const scrollAmount = rect.bottom - visibleBottom + 10;
|
||
scrollContainer.scrollBy({ top: scrollAmount, behavior: 'smooth' });
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 检查元素是否应该跳过自动滚动
|
||
* - data-keep-keyboard: 元素使用布局模式处理键盘，不需要滚动
|
||
* - data-keyboard-scroll="none": 显式禁用自动滚动
|
||
*/
|
||
function shouldSkipAutoScroll(element: HTMLElement): boolean {
|
||
return !!(
|
||
element.closest?.('[data-keep-keyboard]') ||
|
||
element.closest?.('[data-keyboard-scroll="none"]')
|
||
);
|
||
}
|
||
|
||
/**
|
||
* 延迟两帧执行滚动，确保 adjustResize wrapper 已完成布局
|
||
*/
|
||
function deferredSmartScroll(target: HTMLElement, keyboardHeight: number) {
|
||
requestAnimationFrame(() =>
|
||
requestAnimationFrame(() => doSmartScroll(target, keyboardHeight)),
|
||
);
|
||
}
|
||
|
||
/**
|
||
* 智能滚动输入框到可见区域
|
||
* - 如果输入框会被键盘遮挡，滚动到刚好在键盘上方
|
||
* - 如果空间足够，不滚动
|
||
* - 如果元素使用布局模式（data-keep-keyboard），不滚动
|
||
* - 等待键盘高度更新 + adjustResize 布局完成后再判断
|
||
*/
|
||
function safeScrollIntoView(target: HTMLElement) {
|
||
try {
|
||
if (shouldSkipAutoScroll(target)) {
|
||
return;
|
||
}
|
||
|
||
const currentHeight = KeyboardService.getHeight();
|
||
if (currentHeight > 0) {
|
||
deferredSmartScroll(target, currentHeight);
|
||
return;
|
||
}
|
||
|
||
let attempts = 0;
|
||
const maxAttempts = 10;
|
||
|
||
const checkAndScroll = () => {
|
||
attempts++;
|
||
const height = KeyboardService.getHeight();
|
||
if (height > 0) {
|
||
deferredSmartScroll(target, height);
|
||
} else if (attempts < maxAttempts) {
|
||
requestAnimationFrame(checkAndScroll);
|
||
}
|
||
};
|
||
|
||
requestAnimationFrame(checkAndScroll);
|
||
} catch {
|
||
// ignore
|
||
}
|
||
}
|
||
|
||
// Key layout with secondary characters
|
||
const KEY_ROW_1 = [
|
||
{ main: 'Q', sub: '1' },
|
||
{ main: 'W', sub: '2' },
|
||
{ main: 'E', sub: '3' },
|
||
{ main: 'R', sub: '4' },
|
||
{ main: 'T', sub: '5' },
|
||
{ main: 'Y', sub: '6' },
|
||
{ main: 'U', sub: '7' },
|
||
{ main: 'I', sub: '8' },
|
||
{ main: 'O', sub: '9' },
|
||
{ main: 'P', sub: '0' },
|
||
];
|
||
|
||
const KEY_ROW_2 = [
|
||
{ main: 'A', sub: '~' },
|
||
{ main: 'S', sub: '!' },
|
||
{ main: 'D', sub: '@' },
|
||
{ main: 'F', sub: '#' },
|
||
{ main: 'G', sub: '%' },
|
||
{ main: 'H', sub: '"' },
|
||
{ main: 'J', sub: '"' },
|
||
{ main: 'K', sub: '*' },
|
||
{ main: 'L', sub: '?' },
|
||
];
|
||
|
||
const KEY_ROW_3 = [
|
||
{ main: 'Z', sub: '(' },
|
||
{ main: 'X', sub: ')' },
|
||
{ main: 'C', sub: '-' },
|
||
{ main: 'V', sub: ':' },
|
||
{ main: 'B', sub: ';' },
|
||
{ main: 'N', sub: '/' },
|
||
{ main: 'M', sub: "'" },
|
||
];
|
||
|
||
// Number/Symbol rows
|
||
const NUM_ROW_1 = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
|
||
const NUM_ROW_2 = ['-', '/', ':', ';', '(', ')', '￥', '@', '"'];
|
||
const NUM_ROW_3 = ['。', '，', '、', '？', '！', '.', ',', '?', '!'];
|
||
|
||
const SYM_ROW_1 = ['[', ']', '{', '}', '#', '%', '^', '*', '+', '='];
|
||
const SYM_ROW_2 = ['_', '—', '\\', '|', '~', '《', '》', '€', '&'];
|
||
const SYM_ROW_3 = ['…', '·', '「', '」', '『', '』', '【', '】', "'"];
|
||
|
||
type KeyboardPage = 'alpha' | 'num' | 'sym';
|
||
|
||
// Shared mutable container: tracks timestamp until which synthetic mouse events
|
||
// should be ignored (Chrome DevTools touch emulation ghost-click prevention).
|
||
const _ignoreMouseUntil = { current: 0 };
|
||
|
||
const Key = React.memo(function Key({ children, onTap, flex, dark, className = '' }: {
|
||
children: React.ReactNode;
|
||
onTap: () => void;
|
||
flex?: number;
|
||
dark?: boolean;
|
||
className?: string;
|
||
}) {
|
||
const tapped = useRef(false);
|
||
return (
|
||
<div
|
||
className={`
|
||
flex items-center justify-center rounded-[5px] select-none active:opacity-70
|
||
${dark ? 'bg-[#a8abb3]' : 'bg-white'}
|
||
${className}
|
||
`}
|
||
style={{ flex: flex || 1, height: 48 }}
|
||
onPointerDown={(e) => {
|
||
if (e.pointerType === 'mouse' && realNow() < _ignoreMouseUntil.current) return;
|
||
e.preventDefault();
|
||
if (tapped.current) return;
|
||
tapped.current = true;
|
||
onTap();
|
||
setTimeout(() => { tapped.current = false; }, 80);
|
||
}}
|
||
onMouseDown={(e) => {
|
||
if (realNow() < _ignoreMouseUntil.current) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
}
|
||
}}
|
||
onMouseUp={(e) => {
|
||
if (realNow() < _ignoreMouseUntil.current) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
}
|
||
}}
|
||
onClick={(e) => {
|
||
if (realNow() < _ignoreMouseUntil.current) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
}
|
||
}}
|
||
>
|
||
{children}
|
||
</div>
|
||
);
|
||
});
|
||
|
||
const LetterKey = React.memo(function LetterKey({ main, sub, lowercase, onTap }: {
|
||
main: string;
|
||
sub?: string;
|
||
lowercase?: boolean;
|
||
onTap: () => void;
|
||
}) {
|
||
const tapped = useRef(false);
|
||
const display = lowercase ? main.toLowerCase() : main;
|
||
return (
|
||
<div
|
||
className="flex-1 flex flex-col items-center justify-center rounded-[5px] bg-white select-none active:opacity-70 relative"
|
||
style={{ height: 48 }}
|
||
onPointerDown={(e) => {
|
||
if (e.pointerType === 'mouse' && realNow() < _ignoreMouseUntil.current) return;
|
||
e.preventDefault();
|
||
if (tapped.current) return;
|
||
tapped.current = true;
|
||
onTap();
|
||
setTimeout(() => { tapped.current = false; }, 80);
|
||
}}
|
||
onMouseDown={(e) => {
|
||
if (realNow() < _ignoreMouseUntil.current) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
}
|
||
}}
|
||
onMouseUp={(e) => {
|
||
if (realNow() < _ignoreMouseUntil.current) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
}
|
||
}}
|
||
onClick={(e) => {
|
||
if (realNow() < _ignoreMouseUntil.current) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
}
|
||
}}
|
||
>
|
||
{sub && (
|
||
<span className="absolute top-[2px] left-[6px] text-[10px] text-gray-400">{sub}</span>
|
||
)}
|
||
<span className="text-[20px] text-black">{display}</span>
|
||
</div>
|
||
);
|
||
});
|
||
|
||
const CandidateItem = React.memo(function CandidateItem({ text, onSelect }: {
|
||
text: string;
|
||
onSelect: (text: string) => void;
|
||
}) {
|
||
const startX = useRef(0);
|
||
const moved = useRef(false);
|
||
return (
|
||
<div
|
||
className="px-3 h-full flex items-center text-[17px] whitespace-nowrap cursor-pointer active:bg-gray-100"
|
||
onPointerDown={(e) => {
|
||
startX.current = e.clientX;
|
||
moved.current = false;
|
||
}}
|
||
onPointerMove={(e) => {
|
||
if (Math.abs(e.clientX - startX.current) > 5) moved.current = true;
|
||
}}
|
||
onPointerUp={(e) => {
|
||
e.preventDefault();
|
||
if (!moved.current) onSelect(text);
|
||
}}
|
||
>
|
||
{text}
|
||
</div>
|
||
);
|
||
});
|
||
|
||
const ToolbarIcon = React.memo(function ToolbarIcon({ children, onTap, className = '' }: {
|
||
children: React.ReactNode;
|
||
onTap?: () => void;
|
||
className?: string;
|
||
}) {
|
||
return (
|
||
<div
|
||
className={`flex-1 h-12 flex items-center justify-center text-gray-500 active:bg-gray-200 ${className}`}
|
||
onPointerDown={(e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
try {
|
||
(e.currentTarget as HTMLDivElement).setPointerCapture(e.pointerId);
|
||
} catch {
|
||
// ignore
|
||
}
|
||
}}
|
||
onPointerUp={(e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
onTap?.();
|
||
}}
|
||
onClick={(e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
}}
|
||
>
|
||
{children}
|
||
</div>
|
||
);
|
||
});
|
||
|
||
export const KeyboardOverlay: React.FC = () => {
|
||
const rootRef = useRef<HTMLDivElement>(null);
|
||
|
||
const [visible, setVisible] = useState(KeyboardService.getState().visible);
|
||
const [mode, setMode] = useState<KeyboardMode>(KeyboardService.getState().mode);
|
||
const [page, setPage] = useState<KeyboardPage>('alpha');
|
||
|
||
const [pinyinRaw, setPinyinRaw] = useState('');
|
||
|
||
const { candidates, pinyinDisplay } = useMemo(() => {
|
||
if (mode !== 'zh' || !pinyinRaw) {
|
||
return { candidates: [] as string[], pinyinDisplay: '' };
|
||
}
|
||
const result = getZhCandidates(pinyinRaw, 20);
|
||
return { candidates: result.candidates, pinyinDisplay: result.display };
|
||
}, [pinyinRaw, mode]);
|
||
|
||
useEffect(() => {
|
||
return KeyboardService.subscribe(s => {
|
||
setVisible(s.visible);
|
||
setMode(s.mode);
|
||
});
|
||
}, []);
|
||
|
||
// show()/hide() already set height atomically — no separate setHeight needed
|
||
|
||
useEffect(() => {
|
||
if (!visible) {
|
||
setPinyinRaw('');
|
||
setPage('alpha');
|
||
}
|
||
}, [visible]);
|
||
|
||
useEffect(() => {
|
||
if (mode === 'en') {
|
||
setPinyinRaw('');
|
||
}
|
||
}, [mode]);
|
||
|
||
// 记录当前聚焦的输入元素
|
||
const focusedElementRef = useRef<HTMLElement | null>(null);
|
||
|
||
useEffect(() => {
|
||
const onFocusIn = (e: FocusEvent) => {
|
||
const t = e.target as any;
|
||
if (!isEditableElement(t)) return;
|
||
focusedElementRef.current = t;
|
||
KeyboardService.show();
|
||
safeScrollIntoView(t);
|
||
};
|
||
|
||
const onFocusOut = (e: FocusEvent) => {
|
||
setTimeout(() => {
|
||
const active = document.activeElement as any;
|
||
if (!isEditableElement(active)) {
|
||
// 检查原始焦点元素是否在 data-keep-keyboard 容器内
|
||
const target = e.target as HTMLElement;
|
||
if (target?.closest?.('[data-keep-keyboard]')) {
|
||
// 在 keep-keyboard 容器内，不自动关闭键盘
|
||
return;
|
||
}
|
||
focusedElementRef.current = null;
|
||
KeyboardService.hide();
|
||
}
|
||
}, 100);
|
||
};
|
||
|
||
document.addEventListener('focusin', onFocusIn, true);
|
||
document.addEventListener('focusout', onFocusOut, true);
|
||
return () => {
|
||
document.removeEventListener('focusin', onFocusIn, true);
|
||
document.removeEventListener('focusout', onFocusOut, true);
|
||
};
|
||
}, []);
|
||
|
||
// 系统级：监听 DOM 变化，如果聚焦的输入元素被移除（如路由切换），自动关闭键盘
|
||
useEffect(() => {
|
||
if (!visible) return;
|
||
|
||
const focused = focusedElementRef.current;
|
||
if (!focused) return;
|
||
|
||
const observeRoot = focused.closest('[data-adjust-resize]') ?? document.body;
|
||
|
||
const observer = new MutationObserver(() => {
|
||
if (focused && !document.body.contains(focused)) {
|
||
focusedElementRef.current = null;
|
||
KeyboardService.hide();
|
||
}
|
||
});
|
||
|
||
observer.observe(observeRoot, {
|
||
childList: true,
|
||
subtree: true,
|
||
});
|
||
|
||
return () => observer.disconnect();
|
||
}, [visible]);
|
||
|
||
// If an input is already focused, tapping it again may not fire focusin.
|
||
// Use click-capture to show keyboard WITHOUT interfering with pointer/touch sequences.
|
||
// This avoids (1) blur + immediate hide and (2) click-through onto keyboard keys.
|
||
useEffect(() => {
|
||
const onDocClickCapture = (e: MouseEvent) => {
|
||
const t = e.target as any;
|
||
if (!isEditableElement(t)) return;
|
||
|
||
// 如果键盘已显示，仍然执行滚动检查（用户可能滚动了页面）
|
||
if (KeyboardService.isVisible()) {
|
||
safeScrollIntoView(t);
|
||
return;
|
||
}
|
||
|
||
// Arm a short ignore window for synthetic mouse pointer events (touch emulation).
|
||
try {
|
||
const coarse = window.matchMedia?.('(pointer: coarse)')?.matches;
|
||
const hasTouch = (navigator as any).maxTouchPoints > 0;
|
||
const touchLike = coarse || hasTouch || 'ontouchstart' in window;
|
||
if (touchLike) {
|
||
_ignoreMouseUntil.current = realNow() + 200;
|
||
}
|
||
} catch {
|
||
// ignore
|
||
}
|
||
KeyboardService.show();
|
||
safeScrollIntoView(t);
|
||
};
|
||
document.addEventListener('click', onDocClickCapture, true);
|
||
return () => document.removeEventListener('click', onDocClickCapture, true);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const onDocPointerDown = (e: PointerEvent) => {
|
||
if (!KeyboardService.isVisible()) return;
|
||
const t = e.target as HTMLElement;
|
||
if (rootRef.current && t && rootRef.current.contains(t)) return;
|
||
if (isEditableElement(t)) return;
|
||
// Allow apps to mark UI (e.g., chat input bar) as "keyboard accessory" that should not dismiss the keyboard.
|
||
if ((t as HTMLElement).closest?.('[data-keep-keyboard]')) return;
|
||
if ((t as HTMLElement).closest?.('[data-gesture-bar]')) return;
|
||
KeyboardService.hide();
|
||
};
|
||
document.addEventListener('pointerdown', onDocPointerDown, true);
|
||
return () => document.removeEventListener('pointerdown', onDocPointerDown, true);
|
||
}, []);
|
||
|
||
const commitCandidate = useCallback((text: string) => {
|
||
insertText(text);
|
||
setPinyinRaw('');
|
||
}, []);
|
||
|
||
const handleSegKey = useCallback(() => {
|
||
if (mode !== 'zh') return;
|
||
setPinyinRaw(prev => {
|
||
if (!prev) return prev;
|
||
if (prev.endsWith("'")) return prev.slice(0, -1);
|
||
return `${prev}'`;
|
||
});
|
||
}, [mode]);
|
||
|
||
const handleLetter = useCallback((ch: string) => {
|
||
if (mode === 'zh') {
|
||
setPinyinRaw(prev => (prev + ch.toLowerCase()).slice(0, 32));
|
||
return;
|
||
}
|
||
insertText(ch.toLowerCase());
|
||
}, [mode]);
|
||
|
||
const handleSymbol = useCallback((sym: string) => {
|
||
insertText(sym);
|
||
}, []);
|
||
|
||
const handleSpace = useCallback(() => {
|
||
if (mode === 'zh' && pinyinRaw) {
|
||
const best = candidates[0];
|
||
if (best) {
|
||
commitCandidate(best);
|
||
} else {
|
||
insertText(' ');
|
||
setPinyinRaw('');
|
||
}
|
||
return;
|
||
}
|
||
insertText(' ');
|
||
}, [mode, pinyinRaw, candidates, commitCandidate]);
|
||
|
||
const handleBackspace = useCallback(() => {
|
||
if (mode === 'zh' && pinyinRaw) {
|
||
setPinyinRaw(prev => prev.slice(0, -1));
|
||
return;
|
||
}
|
||
deleteBackward();
|
||
}, [mode, pinyinRaw]);
|
||
|
||
const handleEnter = useCallback(() => {
|
||
const el = getActiveEditable();
|
||
if (mode === 'zh' && pinyinRaw) {
|
||
insertText(pinyinRaw);
|
||
setPinyinRaw('');
|
||
return;
|
||
}
|
||
if (el instanceof HTMLTextAreaElement || (el instanceof HTMLElement && el.isContentEditable)) {
|
||
insertText('\n');
|
||
return;
|
||
}
|
||
// For regular input elements, dispatch Enter key events to trigger form submission/search
|
||
if (el) {
|
||
const eventInit: KeyboardEventInit = {
|
||
key: 'Enter',
|
||
code: 'Enter',
|
||
keyCode: 13,
|
||
which: 13,
|
||
bubbles: true,
|
||
cancelable: true,
|
||
};
|
||
const keydownEvent = new KeyboardEvent('keydown', eventInit);
|
||
const keypressEvent = new KeyboardEvent('keypress', eventInit);
|
||
const keyupEvent = new KeyboardEvent('keyup', eventInit);
|
||
|
||
el.dispatchEvent(keydownEvent);
|
||
el.dispatchEvent(keypressEvent);
|
||
el.dispatchEvent(keyupEvent);
|
||
}
|
||
KeyboardService.hide();
|
||
}, [mode, pinyinRaw]);
|
||
|
||
const zIndex = zIndexKeyboard;
|
||
|
||
if (!visible) return null;
|
||
|
||
// Show candidate bar whenever there's pinyin input (even if no candidates yet)
|
||
const showCandidates = mode === 'zh' && pinyinRaw;
|
||
const isEnglish = mode === 'en';
|
||
|
||
return (
|
||
<div
|
||
ref={rootRef}
|
||
data-keyboard="true"
|
||
className="fixed left-0 right-0 select-none"
|
||
style={{ zIndex, bottom: 0, height: keyboardHeight, overflow: 'hidden', background: '#d1d4db' }}
|
||
>
|
||
{/* Top toolbar / Candidate bar */}
|
||
<div className="h-12 bg-[#d1d4db] flex items-center">
|
||
{showCandidates ? (
|
||
<>
|
||
{/* Pinyin display */}
|
||
<div className="px-3 text-[15px] text-blue-500 shrink-0">
|
||
{pinyinDisplay || pinyinRaw}
|
||
</div>
|
||
{/* Candidates */}
|
||
<div
|
||
className="flex-1 h-full overflow-x-auto flex items-center no-scrollbar"
|
||
style={{ WebkitOverflowScrolling: 'touch' }}
|
||
onPointerDown={(e) => e.preventDefault()}
|
||
>
|
||
{candidates.map((c, idx) => (
|
||
<CandidateItem key={`${idx}-${c}`} text={c} onSelect={commitCandidate} />
|
||
))}
|
||
</div>
|
||
</>
|
||
) : (
|
||
<>
|
||
{/* Toolbar icons when no candidates - spread evenly */}
|
||
<ToolbarIcon>
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||
<rect x="3" y="4" width="18" height="18" rx="2" />
|
||
<path d="M3 10h18M9 4v18" />
|
||
</svg>
|
||
</ToolbarIcon>
|
||
<ToolbarIcon>
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||
<rect x="2" y="6" width="20" height="12" rx="2" />
|
||
<path d="M6 10h2M10 10h4M16 10h2M5 14h3M9 14h6M16 14h3" />
|
||
</svg>
|
||
</ToolbarIcon>
|
||
<ToolbarIcon>
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||
<rect x="3" y="3" width="18" height="18" rx="2" />
|
||
<path d="M9 3v18M3 9h6M3 15h6" />
|
||
</svg>
|
||
</ToolbarIcon>
|
||
<ToolbarIcon>
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||
<path d="M12 2a3 3 0 00-3 3v7a3 3 0 006 0V5a3 3 0 00-3-3z" />
|
||
<path d="M19 10v2a7 7 0 01-14 0v-2M12 19v3M8 22h8" />
|
||
</svg>
|
||
</ToolbarIcon>
|
||
<ToolbarIcon>
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||
<circle cx="12" cy="12" r="10" />
|
||
<path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01" />
|
||
</svg>
|
||
</ToolbarIcon>
|
||
<ToolbarIcon onTap={() => KeyboardService.hide()}>
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<path d="M6 9l6 6 6-6" />
|
||
</svg>
|
||
</ToolbarIcon>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{/* Keyboard body */}
|
||
<div className="flex flex-col gap-[6px] p-[3px]" onPointerDown={(e) => e.preventDefault()}>
|
||
{page === 'alpha' ? (
|
||
<>
|
||
{/* Row 1 */}
|
||
<div className="flex gap-[5px]">
|
||
{KEY_ROW_1.map(k => (
|
||
<LetterKey key={k.main} main={k.main} sub={k.sub} lowercase={isEnglish} onTap={() => handleLetter(k.main)} />
|
||
))}
|
||
</div>
|
||
{/* Row 2 */}
|
||
<div className="flex gap-[5px] px-[14px]">
|
||
{KEY_ROW_2.map(k => (
|
||
<LetterKey key={k.main} main={k.main} sub={k.sub} lowercase={isEnglish} onTap={() => handleLetter(k.main)} />
|
||
))}
|
||
</div>
|
||
{/* Row 3 */}
|
||
<div className="flex gap-[5px]">
|
||
<Key flex={1.2} dark onTap={handleSegKey}>
|
||
{isEnglish ? (
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<path d="M12 4L4 12h5v7h6v-7h5L12 4z" />
|
||
</svg>
|
||
) : (
|
||
<span className="text-[14px] text-black">分词</span>
|
||
)}
|
||
</Key>
|
||
{KEY_ROW_3.map(k => (
|
||
<LetterKey key={k.main} main={k.main} sub={k.sub} lowercase={isEnglish} onTap={() => handleLetter(k.main)} />
|
||
))}
|
||
<Key flex={1.2} dark onTap={handleBackspace}>
|
||
<svg width="22" height="16" viewBox="0 0 22 16" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||
<path d="M7 1h13a1 1 0 011 1v12a1 1 0 01-1 1H7l-6-7 6-7z" />
|
||
<path d="M10 5l5 5M15 5l-5 5" strokeLinecap="round" />
|
||
</svg>
|
||
</Key>
|
||
</div>
|
||
{/* Row 4 */}
|
||
<div className="flex gap-[5px]">
|
||
<Key flex={1} dark onTap={() => setPage('sym')}>
|
||
<span className="text-[15px] text-black">符</span>
|
||
</Key>
|
||
<Key flex={1.2} dark onTap={() => setPage('num')}>
|
||
<span className="text-[15px] text-black">123</span>
|
||
</Key>
|
||
<Key flex={0.9} onTap={() => handleSymbol(isEnglish ? ',' : '，')}>
|
||
<div className="relative w-full h-full flex items-center justify-center">
|
||
<span className="text-[20px] text-black">{isEnglish ? ',' : '，'}</span>
|
||
{isEnglish && <span className="absolute top-[2px] right-[6px] text-[10px] text-blue-500">📋</span>}
|
||
</div>
|
||
</Key>
|
||
<Key flex={3} onTap={handleSpace}>
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#999" strokeWidth="1.5">
|
||
<path d="M12 2a3 3 0 00-3 3v7a3 3 0 006 0V5a3 3 0 00-3-3z" />
|
||
<path d="M19 10v2a7 7 0 01-14 0v-2M12 19v3" />
|
||
</svg>
|
||
</Key>
|
||
<Key flex={0.9} onTap={() => handleSymbol(isEnglish ? '.' : '。')}>
|
||
<span className="text-[20px] text-black">{isEnglish ? '.' : '。'}</span>
|
||
</Key>
|
||
<Key flex={1.2} dark onTap={() => { KeyboardService.toggleMode(); setPinyinRaw(''); }}>
|
||
<span className="text-[13px] leading-tight text-center">
|
||
<span className={isEnglish ? 'text-gray-400' : 'text-black font-medium'}>中</span>
|
||
<br/>
|
||
<span className={isEnglish ? 'text-black font-medium' : 'text-gray-400'}>英</span>
|
||
</span>
|
||
</Key>
|
||
<Key flex={1.2} dark onTap={handleEnter}>
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<path d="M9 17l-5-5 5-5M4 12h16v-5" />
|
||
</svg>
|
||
</Key>
|
||
</div>
|
||
</>
|
||
) : page === 'num' ? (
|
||
<>
|
||
{/* Number Row 1 */}
|
||
<div className="flex gap-[5px]">
|
||
{NUM_ROW_1.map(k => (
|
||
<Key key={k} onTap={() => handleSymbol(k)}>
|
||
<span className="text-[20px] text-black">{k}</span>
|
||
</Key>
|
||
))}
|
||
</div>
|
||
{/* Number Row 2 */}
|
||
<div className="flex gap-[5px] px-[14px]">
|
||
{NUM_ROW_2.map(k => (
|
||
<Key key={k} onTap={() => handleSymbol(k)}>
|
||
<span className="text-[20px] text-black">{k}</span>
|
||
</Key>
|
||
))}
|
||
</div>
|
||
{/* Number Row 3 */}
|
||
<div className="flex gap-[5px]">
|
||
<Key flex={1.2} dark onTap={() => setPage('sym')}>
|
||
<span className="text-[14px] text-black">#+=</span>
|
||
</Key>
|
||
{NUM_ROW_3.map(k => (
|
||
<Key key={k} onTap={() => handleSymbol(k)}>
|
||
<span className="text-[18px] text-black">{k}</span>
|
||
</Key>
|
||
))}
|
||
<Key flex={1.2} dark onTap={handleBackspace}>
|
||
<svg width="22" height="16" viewBox="0 0 22 16" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||
<path d="M7 1h13a1 1 0 011 1v12a1 1 0 01-1 1H7l-6-7 6-7z" />
|
||
<path d="M10 5l5 5M15 5l-5 5" strokeLinecap="round" />
|
||
</svg>
|
||
</Key>
|
||
</div>
|
||
{/* Number Row 4 */}
|
||
<div className="flex gap-[5px]">
|
||
<Key flex={1.5} dark onTap={() => setPage('alpha')}>
|
||
<span className="text-[15px] text-black">ABC</span>
|
||
</Key>
|
||
<Key flex={1} onTap={() => handleSymbol('，')}>
|
||
<span className="text-[20px] text-black">，</span>
|
||
</Key>
|
||
<Key flex={3} onTap={handleSpace}>
|
||
<span className="text-[16px] text-gray-400">空格</span>
|
||
</Key>
|
||
<Key flex={1} onTap={() => handleSymbol('。')}>
|
||
<span className="text-[20px] text-black">。</span>
|
||
</Key>
|
||
<Key flex={1.5} dark onTap={handleEnter}>
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<path d="M9 17l-5-5 5-5M4 12h16v-5" />
|
||
</svg>
|
||
</Key>
|
||
</div>
|
||
</>
|
||
) : (
|
||
<>
|
||
{/* Symbol Row 1 */}
|
||
<div className="flex gap-[5px]">
|
||
{SYM_ROW_1.map(k => (
|
||
<Key key={k} onTap={() => handleSymbol(k)}>
|
||
<span className="text-[18px] text-black">{k}</span>
|
||
</Key>
|
||
))}
|
||
</div>
|
||
{/* Symbol Row 2 */}
|
||
<div className="flex gap-[5px] px-[14px]">
|
||
{SYM_ROW_2.map(k => (
|
||
<Key key={k} onTap={() => handleSymbol(k)}>
|
||
<span className="text-[18px] text-black">{k}</span>
|
||
</Key>
|
||
))}
|
||
</div>
|
||
{/* Symbol Row 3 */}
|
||
<div className="flex gap-[5px]">
|
||
<Key flex={1.2} dark onTap={() => setPage('num')}>
|
||
<span className="text-[14px] text-black">123</span>
|
||
</Key>
|
||
{SYM_ROW_3.map(k => (
|
||
<Key key={k} onTap={() => handleSymbol(k)}>
|
||
<span className="text-[18px] text-black">{k}</span>
|
||
</Key>
|
||
))}
|
||
<Key flex={1.2} dark onTap={handleBackspace}>
|
||
<svg width="22" height="16" viewBox="0 0 22 16" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||
<path d="M7 1h13a1 1 0 011 1v12a1 1 0 01-1 1H7l-6-7 6-7z" />
|
||
<path d="M10 5l5 5M15 5l-5 5" strokeLinecap="round" />
|
||
</svg>
|
||
</Key>
|
||
</div>
|
||
{/* Symbol Row 4 */}
|
||
<div className="flex gap-[5px]">
|
||
<Key flex={1.5} dark onTap={() => setPage('alpha')}>
|
||
<span className="text-[15px] text-black">ABC</span>
|
||
</Key>
|
||
<Key flex={1} onTap={() => handleSymbol('，')}>
|
||
<span className="text-[20px] text-black">，</span>
|
||
</Key>
|
||
<Key flex={3} onTap={handleSpace}>
|
||
<span className="text-[16px] text-gray-400">空格</span>
|
||
</Key>
|
||
<Key flex={1} onTap={() => handleSymbol('。')}>
|
||
<span className="text-[20px] text-black">。</span>
|
||
</Key>
|
||
<Key flex={1.5} dark onTap={handleEnter}>
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<path d="M9 17l-5-5 5-5M4 12h16v-5" />
|
||
</svg>
|
||
</Key>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{/* Bottom toolbar */}
|
||
<div className="h-12 flex items-center justify-between px-4">
|
||
{/* Left: Hide keyboard button */}
|
||
<div
|
||
className="w-10 h-10 flex items-center justify-center text-gray-500 active:bg-gray-300 rounded-lg"
|
||
onPointerDown={(e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
}}
|
||
onPointerUp={(e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
KeyboardService.hide();
|
||
}}
|
||
>
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<path d="M6 9l6 6 6-6" />
|
||
</svg>
|
||
</div>
|
||
|
||
{/* Right: Keyboard icon (placeholder) */}
|
||
<div className="w-10 h-10 flex items-center justify-center text-gray-500">
|
||
<svg width="24" height="18" viewBox="0 0 24 18" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||
<rect x="1" y="1" width="22" height="16" rx="2" />
|
||
<rect x="4" y="4" width="2" height="2" rx="0.5" fill="currentColor" stroke="none" />
|
||
<rect x="8" y="4" width="2" height="2" rx="0.5" fill="currentColor" stroke="none" />
|
||
<rect x="12" y="4" width="2" height="2" rx="0.5" fill="currentColor" stroke="none" />
|
||
<rect x="16" y="4" width="2" height="2" rx="0.5" fill="currentColor" stroke="none" />
|
||
<rect x="4" y="8" width="2" height="2" rx="0.5" fill="currentColor" stroke="none" />
|
||
<rect x="8" y="8" width="2" height="2" rx="0.5" fill="currentColor" stroke="none" />
|
||
<rect x="12" y="8" width="2" height="2" rx="0.5" fill="currentColor" stroke="none" />
|
||
<rect x="16" y="8" width="2" height="2" rx="0.5" fill="currentColor" stroke="none" />
|
||
<rect x="6" y="12" width="10" height="2" rx="0.5" fill="currentColor" stroke="none" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|