AMAZEHOME/TypeWords
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: enhance mobile responsiveness and UI components across various pages

Browse Source
This commit is contained in:
SMGDev
2025-10-29 09:25:37 +00:00
parent fba1f145e1
commit f3da181e0f
11 changed files with 820 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/assets/css/style.scss
View File

@@ -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; // 文字透明
}

43
src/components/Panel.vue
View File

@@ -24,7 +24,7 @@ provide('tabIndex', computed(() => tabIndex))
<Close @click="settingStore.showPanel = false"/>
</Tooltip>
</header>
<div class="flex-1 overflow-hidden">
<div class="flex-1 overflow-auto">
<slot></slot>
</div>
</div>
@@ -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;
}
}
}

19
src/components/PracticeLayout.vue
View File

@@ -13,7 +13,7 @@ defineProps<{
<div class="wrap">
<slot name="practice"></slot>
</div>
<div class="panel-wrap" :style="{left:panelLeft}" :class="{'has-panel': settingStore.showPanel}">
<div class="panel-wrap" :style="{left:panelLeft}" :class="{'has-panel': settingStore.showPanel}" @click.self="settingStore.showPanel = false">
<slot name="panel"></slot>
</div>
<div class="footer-wrap">
@@ -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;
}
}
</style>

247
src/hooks/event.ts
View File

@@ -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<string>()
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 {

211
src/pages/article/ArticlesPage.vue
View File

@@ -167,8 +167,8 @@ const {data: recommendBookList, isFetching} = useFetch(resourceWrap(DICT_LIST.AR
<template>
<BasePage>
<div class="card flex justify-between gap-space">
<div>
<div class="card flex justify-between gap-space articles-summary">
<div class="articles-summary__cover">
<Book
v-if="base.sbook.id"
:is-add="false"
@@ -180,20 +180,19 @@ const {data: recommendBookList, isFetching} = useFetch(resourceWrap(DICT_LIST.AR
:is-add="true"
@click="router.push('/book-list')"/>
</div>
<div class="flex-1">
<div class="flex items-center">
<div class="title mr-4">本周学习记录</div>
<div class="flex gap-4 color-gray">
<div class="flex-1 articles-summary__record">
<div class="articles-summary__record-header">
<div class="title">本周学习记录</div>
<div class="articles-summary__week color-gray">
<div
class="w-8 h-8 rounded-md center"
class="week-item"
:class="item ? 'bg-[#409eff] color-white' : 'bg-gray-200'"
v-for="(item, i) in weekList"
:key="i"
>{{ i + 1 }}
</div>
>{{ i + 1 }}</div>
</div>
</div>
<div class="flex gap-4 items-center mt-3 gap-space">
<div class="articles-summary__stats mt-3 gap-space">
<div class="stat">
<div class="num">{{ todayTotalSpend }}</div>
<div class="txt">今日学习时长</div>
@@ -213,7 +212,7 @@ const {data: recommendBookList, isFetching} = useFetch(resourceWrap(DICT_LIST.AR
:format="()=> `${ base.sbook?.lastLearnIndex || 0 }/${base.sbook?.length || 0}篇`"
:show-text="true"></Progress>
</div>
<div class="flex flex-col justify-between items-end">
<div class="flex flex-col justify-between items-end articles-summary__actions">
<div class="flex gap-4 items-center" v-opacity="base.sbook.id">
<div class="color-blue cursor-pointer" @click="router.push('/book-list')">更换</div>
</div>
@@ -228,10 +227,10 @@ const {data: recommendBookList, isFetching} = useFetch(resourceWrap(DICT_LIST.AR
</div>
</div>
<div class="card flex flex-col">
<div class="flex justify-between">
<div class="card flex flex-col articles-list">
<div class="articles-list__header">
<div class="title">我的书籍</div>
<div class="flex gap-4 items-center">
<div class="articles-list__actions">
<PopConfirm title="确认删除所有选中书籍？" @confirm="handleBatchDel" v-if="selectIds.length">
<BaseIcon class="del" title="删除">
<DeleteIcon/>
@@ -244,7 +243,7 @@ const {data: recommendBookList, isFetching} = useFetch(resourceWrap(DICT_LIST.AR
<div class="color-blue cursor-pointer" @click="nav('book-detail', { isAdd: true })">创建个人书籍</div>
</div>
</div>
<div class="flex gap-4 flex-wrap mt-4">
<div class="articles-list__grid mt-4">
<Book :is-add="false"
quantifier="篇"
:item="item"
@@ -258,15 +257,15 @@ const {data: recommendBookList, isFetching} = useFetch(resourceWrap(DICT_LIST.AR
</div>
<div class="card flex flex-col min-h-50" v-loading="isFetching">
<div class="flex justify-between">
<div class="card flex flex-col min-h-50 articles-list" v-loading="isFetching">
<div class="articles-list__header">
<div class="title">推荐</div>
<div class="flex gap-4 items-center">
<div class="articles-list__actions">
<div class="color-blue cursor-pointer" @click="router.push('/book-list')">更多</div>
</div>
</div>
<div class="flex gap-4 flex-wrap mt-4">
<div class="articles-list__grid mt-4">
<Book :is-add="false"
quantifier="篇"
:item="item as any"
@@ -291,6 +290,82 @@ const {data: recommendBookList, isFetching} = useFetch(resourceWrap(DICT_LIST.AR
}
}
.articles-summary {
align-items: stretch;
&__cover {
flex-shrink: 0;
}
&__record {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
&__record-header {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
.title {
margin-right: 0;
}
}
&__week {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: flex-start;
.week-item {
width: 2.5rem;
height: 2.5rem;
border-radius: 0.5rem;
@apply center;
font-weight: 600;
}
}
&__stats {
display: flex;
gap: var(--space);
flex-wrap: wrap;
}
&__actions {
min-width: 12rem;
}
}
.articles-list {
gap: 1rem;
&__header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
&__actions {
display: flex;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
}
&__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
gap: 1rem;
}
}
// 移动端适配
@media (max-width: 768px) {
.card {
@@ -302,76 +377,54 @@ const {data: recommendBookList, isFetching} = useFetch(resourceWrap(DICT_LIST.AR
gap: 1rem;
}
.flex.gap-4.flex-wrap {
flex-direction: column;
gap: 0.5rem;
}
// 优化顶部卡片布局
&.flex.justify-between {
flex-direction: column;
gap: 1rem;
> div {
}
.articles-summary {
flex-direction: column;
gap: 1rem;
&__actions {
width: 100%;
align-items: stretch !important;
.flex {
justify-content: space-between;
}
.base-button {
width: 100%;
}
.flex.justify-between.items-end {
flex-direction: column;
align-items: stretch;
gap: 0.8rem;
.flex.gap-4.items-center {
justify-content: space-between;
.color-blue {
min-height: 44px;
min-width: 44px;
display: flex;
align-items: center;
justify-content: center;
}
}
.base-button {
width: 100%;
min-height: 48px;
}
min-height: 48px;
}
}
// 优化统计卡片布局
.flex.gap-4.flex-wrap {
&__stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
.stat {
padding: 0.6rem;
.num {
font-size: 1rem;
}
.txt {
font-size: 0.75rem;
}
}
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.8rem;
}
// 本周学习记录优化
.flex.gap-2 {
gap: 0.3rem;
flex-wrap: wrap;
justify-content: center;
> div {
&__week {
gap: 0.35rem;
.week-item {
width: 2rem;
height: 2rem;
font-size: 0.8rem;
font-size: 0.85rem;
}
}
}
.articles-list {
&__actions {
width: 100%;
justify-content: flex-start;
gap: 0.6rem;
}
&__grid {
grid-template-columns: 1fr;
}
}
.stat {
padding: 0.8rem;

75
src/pages/article/BookDetail.vue
View File

@@ -179,11 +179,11 @@ function next() {
<template>
<BasePage>
<div class="card mb-0 h-[95vh] flex flex-col" v-if="showBookDetail">
<div class="flex justify-between items-center relative">
<BackIcon class="z-2"/>
<div class="absolute text-2xl text-align-center w-full">{{ runtimeStore.editDict.name }}</div>
<div class="flex">
<div class="card mb-0 dict-detail-card flex flex-col" v-if="showBookDetail">
<div class="dict-header flex justify-between items-center relative">
<BackIcon class="dict-back z-2"/>
<div class="dict-title absolute text-2xl text-align-center w-full">{{ runtimeStore.editDict.name }}</div>
<div class="dict-actions flex gap-2">
<BaseButton v-if="runtimeStore.editDict.custom && runtimeStore.editDict.url" type="info" @click="reset">
恢复默认
</BaseButton>
@@ -254,10 +254,10 @@ function next() {
</div>
</div>
<div class="card mb-0 h-[95vh]" v-else>
<div class="flex justify-between items-center relative">
<BackIcon class="z-2" @click="isAdd ? $router.back():(isEdit = false)"/>
<div class="absolute text-2xl text-align-center w-full">{{ runtimeStore.editDict.id ? '修改' : '创建' }}书籍
<div class="card mb-0 dict-detail-card" v-else>
<div class="dict-header flex justify-between items-center relative">
<BackIcon class="dict-back z-2" @click="isAdd ? $router.back():(isEdit = false)"/>
<div class="dict-title absolute text-2xl text-align-center w-full">{{ runtimeStore.editDict.id ? '修改' : '创建' }}书籍
</div>
</div>
<div class="center">
@@ -273,5 +273,62 @@ function next() {
</template>
<style scoped lang="scss">
.dict-detail-card {
min-height: calc(100vh - 3rem);
}
.dict-header {
gap: 0.5rem;
}
.dict-actions {
flex-wrap: wrap;
}
@media (max-width: 768px) {
.dict-detail-card {
min-height: calc(100vh - 2rem);
}
.dict-header {
width: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 0.75rem;
}
.dict-header .dict-back {
align-self: flex-start;
}
.dict-header .dict-title {
position: static !important;
width: 100%;
}
.dict-header .dict-actions {
width: 100%;
justify-content: center;
gap: 0.75rem;
.base-button {
flex: 1 0 45%;
min-width: 8rem;
}
}
}
@media (max-width: 480px) {
.dict-header .dict-actions {
flex-direction: column;
.base-button {
width: 100%;
min-width: auto;
}
}
}
</style>

110
src/pages/article/components/TypingArticle.vue
View File

@@ -20,6 +20,7 @@ import nlp from "compromise/three";
import { nanoid } from "nanoid";
import { usePracticeStore } from "@/stores/practice.ts";
import { PracticeSaveArticleKey } from "@/config/env.ts";
import useMobile from "@/hooks/useMobile.ts";
interface IProps {
article: Article,
@@ -50,7 +51,8 @@ const emit = defineEmits<{
replay: [],
}>()
let typeArticleRef = $ref<HTMLInputElement>(null)
let typeArticleRef = $ref<HTMLInputElement>()
let mobileInputRef = $ref<HTMLInputElement>()
let articleWrapperRef = $ref<HTMLInputElement>(null)
let sectionIndex = $ref(0)
let sentenceIndex = $ref(0)
@@ -85,6 +87,7 @@ const {
const store = useBaseStore()
const settingStore = useSettingStore()
const statStore = usePracticeStore()
const isMobile = useMobile()
watch([() => sectionIndex, () => sentenceIndex, () => wordIndex, () => stringIndex], ([a, b, c,]) => {
localStorage.setItem(PracticeSaveArticleKey.key, JSON.stringify({
@@ -150,6 +153,7 @@ function init() {
typeArticleRef?.scrollTo({top: 0, behavior: "smooth"})
}
checkTranslateLocation().then(() => checkCursorPosition())
focusMobileInput()
}
function checkCursorPosition(a = sectionIndex, b = sentenceIndex, c = wordIndex) {
@@ -181,6 +185,10 @@ function checkCursorPosition(a = sectionIndex, b = sentenceIndex, c = wordIndex)
function checkTranslateLocation() {
// console.log('checkTranslateLocation')
return new Promise<void>(resolve => {
if (isMobile) {
resolve()
return
}
_nextTick(() => {
let articleRect = articleWrapperRef.getBoundingClientRect()
props.article.sections.map((v, i) => {
@@ -205,6 +213,42 @@ function checkTranslateLocation() {
})
}
function focusMobileInput() {
if (!isMobile) return
mobileInputRef?.focus()
}
function processMobileCharacter(char: string) {
if (!char) return
const code = char === ' ' ? 'Space' : char === '\n' ? 'Enter' : `Key${char.toUpperCase()}`
const fakeEvent = {
key: char,
code,
preventDefault() {},
stopPropagation() {},
} as unknown as KeyboardEvent
onTyping(fakeEvent)
}
function handleMobileInput(event: Event) {
if (!isMobile) return
const target = event.target as HTMLInputElement
const value = target?.value ?? ''
if (!value) return
for (const char of value) {
processMobileCharacter(char)
}
target.value = ''
}
function handleMobileBeforeInput(event: InputEvent) {
if (!isMobile) return
if (event.inputType === 'deleteContentBackward') {
event.preventDefault()
del()
}
}
let isTyping = false
//专用锁，因为这个方法父级要调用
let lock = false
@@ -243,6 +287,7 @@ function nextSentence() {
emit('play', {sentence: currentSection[sentenceIndex], handle: false})
}
lock = false
focusMobileInput()
}
function onTyping(e: KeyboardEvent) {
@@ -327,7 +372,7 @@ function onTyping(e: KeyboardEvent) {
isTyping = false
}
}
function play() {
let currentSection = props.article.sections[sectionIndex]
emit('play', {sentence: currentSection[sentenceIndex], handle: true})
@@ -378,6 +423,7 @@ function del() {
}
input = currentWord.input = currentWord.input.slice(0, stringIndex)
checkCursorPosition()
focusMobileInput()
}
}
@@ -515,6 +561,9 @@ onMounted(() => {
wrong = input = ''
})
emitter.on(EventKey.onTyping, onTyping)
if (isMobile) {
focusMobileInput()
}
})
onUnmounted(() => {
@@ -535,7 +584,19 @@ const currentPractice = inject('currentPractice', [])
</script>
<template>
<div class="typing-article" ref="typeArticleRef">
<div class="typing-article" ref="typeArticleRef" @click="focusMobileInput">
<input
v-if="isMobile"
ref="mobileInputRef"
class="mobile-input"
type="text"
inputmode="text"
autocomplete="off"
autocorrect="off"
autocapitalize="none"
@beforeinput="handleMobileBeforeInput"
@input="handleMobileInput"
/>
<header class="mb-4">
<div class="title word"><span class="font-family text-3xl">{{ store.sbook.lastLearnIndex + 1 }}.</span>{{ props.article.title }}</div>
<div class="titleTranslate" v-if="settingStore.translate">{{ props.article.titleTranslate }}</div>
@@ -587,6 +648,11 @@ const currentPractice = inject('currentPractice', [])
:is-shake="isCurrent(indexI,indexJ,indexW) && isSpace && wrong !== ''"
/>
</span>
<span
class="sentence-translate-mobile"
v-if="isMobile && settingStore.translate && sentence.translate">
{{ sentence.translate }}
</span>
</span>
</div>
</article>
@@ -687,6 +753,14 @@ $article-lh: 2.4;
}
}
.mobile-input {
position: absolute;
opacity: 0;
pointer-events: none;
height: 0;
width: 0;
}
.article-content {
position: relative;
}
@@ -784,6 +858,10 @@ $article-lh: 2.4;
}
}
.sentence-translate-mobile {
display: none;
}
// 移动端适配
@media (max-width: 768px) {
.typing-article {
@@ -835,18 +913,20 @@ $article-lh: 2.4;
}
}
}
.sentence-translate-mobile {
display: block;
margin-top: 0.4rem;
font-size: 0.9rem;
line-height: 1.4;
color: var(--color-font-3);
font-family: var(--zh-article-family);
word-break: break-word;
}
// 翻译区域优化
.translate {
font-size: 1rem;
line-height: 1.4;
letter-spacing: 0.1rem;
.row {
.space {
margin-right: 0.1rem;
}
}
display: none;
}
// 问答表单优化
@@ -891,9 +971,9 @@ $article-lh: 2.4;
}
}
.translate {
font-size: 0.9rem;
line-height: 1.3;
.sentence-translate-mobile {
font-size: 0.85rem;
line-height: 1.35;
}
}
}

115
src/pages/setting/SettingItem.vue
View File

@@ -7,16 +7,119 @@ defineProps<{
</script>
<template>
<div class="flex items-center gap-40" :class="desc ? 'mt-4' : 'my-4'" v-bind="$attrs">
<span v-if="title">{{ title }}</span>
<span class="text-xl font-bold" v-if="mainTitle">{{ mainTitle }}</span>
<div class="flex flex-1 justify-end">
<slot></slot>
<div class="setting-item" :class="{'has-desc': !!desc}" v-bind="$attrs">
<div class="setting-item__main">
<div class="setting-item__label">
<span v-if="mainTitle" class="setting-item__main-title">{{ mainTitle }}</span>
<span v-else-if="title" class="setting-item__title">{{ title }}</span>
</div>
<div class="setting-item__control">
<slot></slot>
</div>
</div>
<div v-if="desc" class="setting-item__desc">{{ desc }}</div>
</div>
<div class="text-sm mb-3" v-if="desc">{{ desc }}</div>
</template>
<style scoped lang="scss">
.setting-item {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 1rem 0;
width: 100%;
}
.setting-item__main {
display: flex;
align-items: center;
gap: 2.5rem;
width: 100%;
}
.setting-item__label {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 12rem;
max-width: 18rem;
line-height: 1.4;
color: var(--color-font-1);
}
.setting-item__main-title {
font-size: 1.2rem;
font-weight: 600;
}
.setting-item__title {
font-size: 1rem;
font-weight: 500;
}
.setting-item__control {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
gap: var(--space);
flex-wrap: wrap;
}
.setting-item__desc {
font-size: 0.9rem;
color: var(--color-font-3);
line-height: 1.6;
}
@media (max-width: 1024px) {
.setting-item__label {
min-width: 10rem;
}
}
@media (max-width: 768px) {
.setting-item {
margin: 0.75rem 0;
gap: 0.4rem;
}
.setting-item__main {
flex-direction: column;
align-items: flex-start;
gap: 0.6rem;
}
.setting-item__label {
min-width: auto;
max-width: 100%;
width: 100%;
}
.setting-item__control {
width: 100%;
justify-content: flex-start;
gap: 0.6rem;
}
.setting-item__control > * {
max-width: 100%;
}
.setting-item__desc {
font-size: 0.85rem;
}
}
@media (max-width: 480px) {
.setting-item__main-title,
.setting-item__title {
font-size: 1rem;
}
.setting-item__desc {
font-size: 0.8rem;
}
}
</style>

165
src/pages/word/DictDetail.vue
View File

@@ -28,11 +28,13 @@ import { useSettingStore } from "@/stores/setting.ts";
import { MessageBox } from "@/utils/MessageBox.tsx";
import { CAN_REQUEST, Origin, PracticeSaveWordKey } from "@/config/env.ts";
import { detail } from "@/apis";
import useMobile from "@/hooks/useMobile.ts";
const runtimeStore = useRuntimeStore()
const base = useBaseStore()
const router = useRouter()
const route = useRoute()
const isMobile = useMobile()
let loading = $ref(false)
@@ -158,21 +160,25 @@ function word2Str(word) {
function editWord(word) {
isOperate = true
wordForm = word2Str(word)
if (isMobile) activeTab = 'edit'
}
function addWord() {
// setTimeout(wordListRef?.scrollToBottom, 100)
isOperate = true
wordForm = getDefaultFormWord()
if (isMobile) activeTab = 'edit'
}
function closeWordForm() {
isOperate = false
wordForm = getDefaultFormWord()
if (isMobile) activeTab = 'list'
}
let isEdit = $ref(false)
let isAdd = $ref(false)
let activeTab = $ref<'list' | 'edit'>('list') // 移动端标签页状态
const showBookDetail = computed(() => {
return !(isAdd || isEdit);
@@ -375,11 +381,11 @@ defineRender(() => {
return (
<BasePage>
{
showBookDetail.value ? <div className="card mb-0 h-[95vh] flex flex-col">
<div class="flex justify-between items-center relative">
<BackIcon class="z-2"/>
<div class="absolute page-title text-align-center w-full">{runtimeStore.editDict.name}</div>
<div class="flex">
showBookDetail.value ? <div className="card mb-0 dict-detail-card flex flex-col">
<div class="dict-header flex justify-between items-center relative">
<BackIcon class="dict-back z-2"/>
<div class="dict-title absolute page-title text-align-center w-full">{runtimeStore.editDict.name}</div>
<div class="dict-actions flex gap-2">
<BaseButton loading={studyLoading || loading} type="info"
onClick={() => isEdit = true}>编辑</BaseButton>
<BaseButton loading={studyLoading || loading} onClick={addMyStudyList}>学习</BaseButton>
@@ -388,8 +394,26 @@ defineRender(() => {
<div class="text-lg ">介绍：{runtimeStore.editDict.description}</div>
<div class="line my-3"></div>
<div class="flex flex-1 overflow-hidden">
<div class="w-4/10">
{/* 移动端标签页导航 */}
{isMobile && isOperate && (
<div class="tab-navigation mb-3">
<div
class={`tab-item ${activeTab === 'list' ? 'active' : ''}`}
onClick={() => activeTab = 'list'}
>
单词列表
</div>
<div
class={`tab-item ${activeTab === 'edit' ? 'active' : ''}`}
onClick={() => activeTab = 'edit'}
>
{wordForm.id ? '编辑' : '添加'}单词
</div>
</div>
)}
<div class="flex flex-1 overflow-hidden content-area">
<div class={`word-list-section ${isMobile && isOperate && activeTab !== 'list' ? 'mobile-hidden' : ''}`}>
<BaseTable
ref={tableRef}
class="h-full"
@@ -438,7 +462,7 @@ defineRender(() => {
</div>
{
isOperate ? (
<div class="flex-1 flex flex-col ml-4">
<div class={`edit-section flex-1 flex flex-col ${isMobile && activeTab !== 'edit' ? 'mobile-hidden' : ''}`}>
<div class="common-title">
{wordForm.id ? '修改' : '添加'}单词
</div>
@@ -524,16 +548,16 @@ defineRender(() => {
}
</div>
</div> :
<div class="card mb-0 h-[95vh]">
<div class="flex justify-between items-center relative">
<BackIcon class="z-2" onClick={() => {
<div class="card mb-0 dict-detail-card">
<div class="dict-header flex justify-between items-center relative">
<BackIcon class="dict-back z-2" onClick={() => {
if (isAdd) {
router.back()
} else {
isEdit = false
}
}}/>
<div class="absolute page-title text-align-center w-full">
<div class="dict-title absolute page-title text-align-center w-full">
{runtimeStore.editDict.id ? '修改' : '创建'}词典
</div>
</div>
@@ -559,5 +583,122 @@ defineRender(() => {
</script>
<style scoped lang="scss">
.dict-detail-card {
min-height: calc(100vh - 3rem);
}
.dict-header {
gap: 0.5rem;
}
.dict-actions {
flex-wrap: wrap;
}
.word-list-section {
width: 40%;
}
.edit-section {
margin-left: 1rem;
}
.tab-navigation {
display: none; // 默认隐藏，移动端显示
}
.mobile-hidden {
display: none;
}
// 移动端适配
@media (max-width: 768px) {
.dict-detail-card {
min-height: calc(100vh - 2rem);
margin-bottom: 0 !important;
}
.dict-header {
width: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 0.75rem;
}
.dict-header .dict-back {
align-self: flex-start;
}
.dict-header .dict-title {
position: static !important;
width: 100%;
}
.dict-header .dict-actions {
width: 100%;
justify-content: center;
gap: 0.75rem;
}
.tab-navigation {
display: flex;
border-bottom: 2px solid var(--color-item-border);
margin-bottom: 1rem;
gap: 0;
.tab-item {
flex: 1;
padding: 0.75rem 1rem;
text-align: center;
cursor: pointer;
font-size: 0.95rem;
font-weight: 500;
color: var(--color-sub-text);
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: all 0.3s ease;
user-select: none;
&:active {
transform: scale(0.98);
}
&.active {
color: var(--color-icon-hightlight);
border-bottom-color: var(--color-icon-hightlight);
}
}
}
.content-area {
flex-direction: column;
.word-list-section,
.edit-section {
width: 100% !important;
margin-left: 0 !important;
max-width: 100%;
}
.edit-section {
margin-top: 0;
}
}
}
// 超小屏幕适配
@media (max-width: 480px) {
.dict-detail-card {
min-height: calc(100vh - 1rem);
}
.tab-navigation {
.tab-item {
padding: 0.6rem 0.5rem;
font-size: 0.9rem;
}
}
}
</style>

5
src/pages/word/components/Footer.vue
View File

@@ -170,6 +170,7 @@ const progress = $computed(() => {
flex-shrink: 0;
width: var(--toolbar-width);
position: relative;
z-index: 20; // 提高z-index确保在最上方
&.hide {
margin-bottom: -6rem;
@@ -186,8 +187,7 @@ const progress = $computed(() => {
box-sizing: border-box;
border-radius: .6rem;
background: var(--color-second);
padding: .2rem var(--space) .4rem var(--space);
z-index: 2;
padding: .2rem var(--space) calc(.4rem + env(safe-area-inset-bottom, 0px)) var(--space);
border: 1px solid var(--color-item-border);
box-shadow: var(--shadow);
@@ -221,6 +221,7 @@ const progress = $computed(() => {
box-sizing: border-box;
position: fixed;
bottom: 1rem;
z-index: 9998; // 确保进度条也在最上方
}
.arrow {

16
src/pages/word/components/TypeWord.vue
View File

@@ -552,6 +552,7 @@ useEvents([
word-break: break-word;
position: relative;
color: var(--color-font-2);
padding-bottom: 8rem;
.phonetic, .translate {
font-size: 1.2rem;
@@ -624,7 +625,7 @@ useEvents([
// 移动端适配
@media (max-width: 768px) {
.typing-word {
padding: 0 0.5rem;
padding: 0 0.5rem 12rem;
.word {
font-size: 2rem !important;
@@ -672,11 +673,20 @@ useEvents([
}
}
// 移动端例句调整
// 确保短语和例句区域保持默认层级
.phrase-section,
.sentence {
position: relative;
z-index: auto;
}
// 移动端例句和短语调整
.sentence,
.phrase {
font-size: 0.9rem;
line-height: 1.4;
margin-bottom: 0.5rem;
pointer-events: auto; // 允许点击但不调起输入法
}
// 移动端短语调整
@@ -691,7 +701,7 @@ useEvents([
// 超小屏幕适配
@media (max-width: 480px) {
.typing-word {
padding: 0 0.3rem;
padding: 0 0.3rem 12rem;
.word {
font-size: 1.5rem !important;