From f3da181e0f3002631f8050e77b8c1221ff4b9a1c Mon Sep 17 00:00:00 2001 From: SMGDev Date: Wed, 29 Oct 2025 09:25:37 +0000 Subject: [PATCH] refactor: enhance mobile responsiveness and UI components across various pages --- src/assets/css/style.scss | 17 +- src/components/Panel.vue | 43 +-- src/components/PracticeLayout.vue | 19 +- src/hooks/event.ts | 247 ++++++++++++++---- src/pages/article/ArticlesPage.vue | 211 +++++++++------ src/pages/article/BookDetail.vue | 75 +++++- .../article/components/TypingArticle.vue | 110 ++++++-- src/pages/setting/SettingItem.vue | 115 +++++++- src/pages/word/DictDetail.vue | 165 +++++++++++- src/pages/word/components/Footer.vue | 5 +- src/pages/word/components/TypeWord.vue | 16 +- 11 files changed, 820 insertions(+), 203 deletions(-) diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss index 5fa5b8b2..760c157d 100644 --- a/src/assets/css/style.scss +++ b/src/assets/css/style.scss @@ -463,9 +463,16 @@ a { #typing-listener { position: fixed; - right: 0; - bottom: 0; - z-index: 9999; - height: 3rem; - // display: none !important; + left: -9999px; + top: -9999px; + width: 1px; + height: 1px; + opacity: 0.01; + z-index: -1; + pointer-events: none; + border: none; + outline: none; + background: transparent; + font-size: 16px; // 防止iOS缩放 + color: transparent; // 文字透明 } \ No newline at end of file diff --git a/src/components/Panel.vue b/src/components/Panel.vue index 4d1d1f69..142a16b6 100644 --- a/src/components/Panel.vue +++ b/src/components/Panel.vue @@ -24,7 +24,7 @@ provide('tabIndex', computed(() => tabIndex)) -
+
@@ -48,15 +48,20 @@ provide('tabIndex', computed(() => tabIndex)) .panel { width: 90vw; max-width: 400px; - max-height: 80vh; + max-height: 90vh; + height: auto; border-radius: 0.4rem; - - header { - padding: 0.5rem 0.5rem; - - .color-main { - font-size: 0.9rem; - } + } + + .panel > div.flex-1 { + max-height: calc(90vh - 3.2rem); + } + + .panel header { + padding: 0.5rem 0.5rem; + + .color-main { + font-size: 0.9rem; } } } @@ -65,14 +70,18 @@ provide('tabIndex', computed(() => tabIndex)) @media (max-width: 480px) { .panel { width: 95vw; - max-height: 85vh; - - header { - padding: 0.3rem 0.3rem; - - .color-main { - font-size: 0.8rem; - } + max-height: 94vh; + } + + .panel > div.flex-1 { + max-height: calc(94vh - 3rem); + } + + .panel header { + padding: 0.3rem 0.3rem; + + .color-main { + font-size: 0.8rem; } } } diff --git a/src/components/PracticeLayout.vue b/src/components/PracticeLayout.vue index 57e8fd15..6de234cb 100644 --- a/src/components/PracticeLayout.vue +++ b/src/components/PracticeLayout.vue @@ -13,7 +13,7 @@ defineProps<{
-
+
@@ -41,8 +41,9 @@ defineProps<{ .footer-wrap { position: fixed; - bottom: 0.8rem; + bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px)); transition: all var(--anim-time); + z-index: 999; } .panel-wrap { @@ -67,12 +68,12 @@ defineProps<{ } .footer-wrap { - bottom: -4rem; + bottom: calc(-4rem + env(safe-area-inset-bottom, 0px)); } } .footer-wrap { - bottom: 0.5rem; + bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)); left: 0.5rem; right: 0.5rem; width: auto; @@ -81,13 +82,11 @@ defineProps<{ .panel-wrap { position: fixed; top: 0; - left: 0; - right: 0; + left: 0 !important; + right: 0 !important; bottom: 0; height: 100vh; z-index: 1000; - - // 面板内容居中显示 display: flex; align-items: center; justify-content: center; @@ -119,13 +118,15 @@ defineProps<{ } .footer-wrap { - bottom: 0.3rem; + bottom: calc(0.3rem + env(safe-area-inset-bottom, 0px)); left: 0.3rem; right: 0.3rem; } .panel-wrap { padding: 0.5rem; + left: 0 !important; + right: 0 !important; } } diff --git a/src/hooks/event.ts b/src/hooks/event.ts index b02ffdad..e256e10f 100644 --- a/src/hooks/event.ts +++ b/src/hooks/event.ts @@ -16,55 +16,206 @@ export function useWindowClick(cb: (e: PointerEvent) => void) { } export function useEventListener(type: string, listener: EventListenerOrEventListenerObject) { - onMounted(() => { - if (isMobile()) { - let tx: HTMLInputElement = document.querySelector('#typing-listener') - if (!tx) { - tx = document.createElement('input') - tx.id = 'typing-listener' - tx.type = 'text' - } - tx.addEventListener('input', (e: any) => { - if (e.data === ' ') e.code = 'Space' - if (e.data === null) { - e.key = 'Backspace' - e.keyCode = 1 - } else { - e.keyCode = 66 - e.key = e.data - } - - e.ctrlKey = false - e.altKey = false - e.shiftKey = false - //@ts-ignore - listener(e) - e.target.value = '1' - }) - const ss = () => { - setTimeout(() => tx.focus(), 100) - } - window.removeEventListener('click', ss) - window.addEventListener('click', ss) - window.addEventListener(type, listener) - document.body.appendChild(tx) - tx.focus() - } else { - window.addEventListener(type, listener) + const invokeListener = (event: KeyboardEvent) => { + if (typeof listener === 'function') { + return (listener as EventListener)(event) } - }) - const remove = () => { - if (isMobile()) { - let s = document.querySelector('#typing-listener') - if (s) { - s.removeEventListener(type, listener) - s.parentNode.removeChild(s) - } - window.removeEventListener(type, listener) - } else { - window.removeEventListener(type, listener) + if (listener && typeof (listener as EventListenerObject).handleEvent === 'function') { + return (listener as EventListenerObject).handleEvent(event) } } + + let cleanup: (() => void) | null = null + + onMounted(() => { + const cleanupFns: Array<() => void> = [] + const registerCleanup = (fn: () => void) => cleanupFns.push(fn) + + const performCleanup = () => { + while (cleanupFns.length) { + const fn = cleanupFns.pop() + try { + fn() + } catch (err) { + console.warn('[useEventListener] cleanup error', err) + } + } + } + + if (isMobile() && type === 'keydown') { + const ensureMobileInput = () => { + let input = document.querySelector('#typing-listener') as HTMLInputElement | null + if (!input) { + input = document.createElement('input') + input.id = 'typing-listener' + input.type = 'text' + input.autocomplete = 'off' + input.autocapitalize = 'off' + input.autocorrect = false + input.spellcheck = false + input.tabIndex = -1 + input.setAttribute('aria-hidden', 'true') + Object.assign(input.style, { + position: 'fixed', + opacity: '0', + pointerEvents: 'none', + width: '1px', + height: '1px', + top: '0', + left: '-9999px', + zIndex: '-1', + }) + } + if (!input.parentNode) { + document.body.appendChild(input) + } + return input + } + + const hiddenInput = ensureMobileInput() + let isComposing = false + const ignoredKeys = new Set() + const markIgnore = (key: string) => { + ignoredKeys.add(key) + window.setTimeout(() => ignoredKeys.delete(key), 150) + } + + const createSyntheticEvent = (payload: { key: string; code?: string; keyCode: number }) => { + const base = { + key: payload.key, + code: payload.code ?? '', + keyCode: payload.keyCode, + which: payload.keyCode, + ctrlKey: false, + altKey: false, + shiftKey: false, + metaKey: false, + repeat: false, + isComposing: false, + type, + preventDefault() {}, + stopPropagation() {}, + stopImmediatePropagation() {}, + } + return base as unknown as KeyboardEvent + } + + const dispatchSyntheticKey = (payload: { key: string; code?: string; keyCode: number }) => { + markIgnore(payload.key) + invokeListener(createSyntheticEvent(payload)) + } + + const handleCompositionStart = () => { + isComposing = true + } + + const handleCompositionEnd = (event: CompositionEvent) => { + isComposing = false + if (!event.data) { + hiddenInput.value = '' + return + } + for (const char of event.data) { + const keyCode = char === ' ' ? 32 : char.toUpperCase().charCodeAt(0) + dispatchSyntheticKey({ + key: char, + code: char === ' ' ? 'Space' : undefined, + keyCode, + }) + } + hiddenInput.value = '' + } + + const handleInput = (event: InputEvent) => { + if (isComposing) return + const target = event.target as HTMLInputElement | null + const value = target?.value ?? '' + + if (event.inputType === 'deleteContentBackward') { + dispatchSyntheticKey({ key: 'Backspace', code: 'Backspace', keyCode: 8 }) + if (target) target.value = '' + return + } + + const char = value.slice(-1) || (event as any).data?.slice(-1) + if (!char) { + if (target) target.value = '' + return + } + + const keyCode = char === ' ' ? 32 : char.toUpperCase().charCodeAt(0) + dispatchSyntheticKey({ + key: char, + code: char === ' ' ? 'Space' : undefined, + keyCode, + }) + + window.setTimeout(() => { + if (target) target.value = '' + }, 0) + } + + const shouldFocusInput = (target: HTMLElement | null) => { + if (!target) return false + if (!window.location.pathname.includes('/practice')) return false + const typingWord = target.closest('.typing-word') + if (!typingWord) return false + if (target.closest('.sentence') || target.closest('.phrase')) return false + if (target.classList?.contains('flex') && target.querySelector('.phrase')) return false + return true + } + + const handleFocusRequest = (event: MouseEvent | TouchEvent) => { + const target = event.target as HTMLElement | null + if (!shouldFocusInput(target)) return + window.setTimeout(() => hiddenInput.focus(), 60) + } + + const windowListener = (event: KeyboardEvent) => { + if (ignoredKeys.has(event.key)) { + ignoredKeys.delete(event.key) + return + } + invokeListener(event) + } + + hiddenInput.addEventListener('compositionstart', handleCompositionStart) + registerCleanup(() => hiddenInput.removeEventListener('compositionstart', handleCompositionStart)) + + hiddenInput.addEventListener('compositionend', handleCompositionEnd) + registerCleanup(() => hiddenInput.removeEventListener('compositionend', handleCompositionEnd)) + + hiddenInput.addEventListener('input', handleInput) + registerCleanup(() => hiddenInput.removeEventListener('input', handleInput)) + + window.addEventListener('click', handleFocusRequest) + registerCleanup(() => window.removeEventListener('click', handleFocusRequest)) + + window.addEventListener('touchstart', handleFocusRequest) + registerCleanup(() => window.removeEventListener('touchstart', handleFocusRequest)) + + window.addEventListener(type, windowListener) + registerCleanup(() => window.removeEventListener(type, windowListener)) + + registerCleanup(() => { + hiddenInput.value = '' + }) + } else { + const windowListener = (event: Event) => invokeListener(event as KeyboardEvent) + window.addEventListener(type, windowListener) + registerCleanup(() => window.removeEventListener(type, windowListener)) + } + + cleanup = () => { + performCleanup() + cleanup = null + } + }) + + const remove = () => { + if (cleanup) cleanup() + } + onUnmounted(remove) onDeactivated(remove) } @@ -161,6 +312,10 @@ export function useStartKeyboardEventListener() { || e.keyCode === 229 //当按下功能键时，不阻止事件传播 ) && (!e.ctrlKey && !e.altKey)) { + if (isMobile() && e.keyCode === 229 && e.key === 'Unidentified') { + // 安卓软键盘在keydown阶段不会提供字符，等待input/composition事件来派发实际输入 + return + } e.preventDefault() emitter.emit(EventKey.onTyping, e) } else { diff --git a/src/pages/article/ArticlesPage.vue b/src/pages/article/ArticlesPage.vue index f42023e4..b3d01cd6 100644 --- a/src/pages/article/ArticlesPage.vue +++ b/src/pages/article/ArticlesPage.vue @@ -167,8 +167,8 @@ const {data: recommendBookList, isFetching} = useFetch(resourceWrap(DICT_LIST.AR