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))
           <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;
     }
   }
 }
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<{
     <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>
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<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 {
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
 
 <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;
diff --git a/src/pages/article/BookDetail.vue b/src/pages/article/BookDetail.vue
index 92e646d2..95f017e2 100644
--- a/src/pages/article/BookDetail.vue
+++ b/src/pages/article/BookDetail.vue
@@ -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>
diff --git a/src/pages/article/components/TypingArticle.vue b/src/pages/article/components/TypingArticle.vue
index 054f3870..74bbe9e0 100644
--- a/src/pages/article/components/TypingArticle.vue
+++ b/src/pages/article/components/TypingArticle.vue
@@ -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;
     }
   }
 }
diff --git a/src/pages/setting/SettingItem.vue b/src/pages/setting/SettingItem.vue
index 1c8746ac..7ff92504 100644
--- a/src/pages/setting/SettingItem.vue
+++ b/src/pages/setting/SettingItem.vue
@@ -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>
diff --git a/src/pages/word/DictDetail.vue b/src/pages/word/DictDetail.vue
index 93e95a52..3829233a 100644
--- a/src/pages/word/DictDetail.vue
+++ b/src/pages/word/DictDetail.vue
@@ -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>
diff --git a/src/pages/word/components/Footer.vue b/src/pages/word/components/Footer.vue
index 1e401659..85b15e4d 100644
--- a/src/pages/word/components/Footer.vue
+++ b/src/pages/word/components/Footer.vue
@@ -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 {
diff --git a/src/pages/word/components/TypeWord.vue b/src/pages/word/components/TypeWord.vue
index 02fc502a..7f27b4ad 100644
--- a/src/pages/word/components/TypeWord.vue
+++ b/src/pages/word/components/TypeWord.vue
@@ -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;