Merge branch 'refs/heads/master' into dev

# Conflicts: # components.d.ts # src/pages/word/Statistics.vue
2025-11-22 01:39:38 +08:00
parent 1347aa3065 6113bfa5f5
commit 4f0f49ca24
39 changed files with 2365 additions and 172 deletions
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -156,7 +156,27 @@ html.dark {
    --article-toolbar-width: 40rem;
    --article-panel-width: 16rem;
  }
+}

+// 移动端适配
+@media (max-width: 768px) {
+  :root {
+    --toolbar-width: 100vw;
+    --panel-width: 100vw;
+    --article-width: 100vw;
+    --article-toolbar-width: 100vw;
+    --space: 0.5rem;
+    --stat-gap: 0.3rem;
+    --article-panel-width: 100vw;
+    --word-panel-margin-left: 0;
+  }
+}
+
+@media (max-width: 480px) {
+  :root {
+    --space: 0.3rem;
+    --stat-gap: 0.2rem;
+  }
 }

 .anim {
@@ -467,8 +487,16 @@ a {

 #typing-listener {
  position: fixed;
-  right: 0;
-  bottom: 0;
-  z-index: 9999;
-  height: 3rem;
+  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; // 文字透明
 }
--- a/src/components/BasePage.vue
+++ b/src/components/BasePage.vue
@@ -15,4 +15,24 @@
  min-height: calc(100vh - 1.2rem);
  margin-top: 1.2rem;
 }
+
+// 移动端适配
+@media (max-width: 768px) {
+  .page {
+    width: 100vw !important;
+    margin-top: 0.5rem;
+    min-height: calc(100vh - 0.5rem);
+    padding: 0 0.5rem;
+    box-sizing: border-box;
+  }
+}
+
+// 超小屏幕适配
+@media (max-width: 480px) {
+  .page {
+    margin-top: 0.3rem;
+    min-height: calc(100vh - 0.3rem);
+    padding: 0 0.3rem;
+  }
+}
 </style>
--- a/src/components/Logo.vue
+++ b/src/components/Logo.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import {useSettingStore} from "@/stores/setting.ts";
-import router from "@/router.ts";
+import { useRouter } from 'vue-router'

 const settingStore = useSettingStore()
+const router = useRouter()

 function goHome() {
  router.push('/')
--- 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>
@@ -42,4 +42,47 @@ provide('tabIndex', computed(() => tabIndex))
  border: 1px solid var(--color-item-border);
  box-shadow: var(--shadow);
 }
+
+// 移动端适配
+@media (max-width: 768px) {
+  .panel {
+    width: 90vw;
+    max-width: 400px;
+    max-height: 90vh;
+    height: auto;
+    border-radius: 0.4rem;
+  }
+
+  .panel > div.flex-1 {
+    max-height: calc(90vh - 3.2rem);
+  }
+
+  .panel header {
+    padding: 0.5rem 0.5rem;
+
+    .color-main {
+      font-size: 0.9rem;
+    }
+  }
+}
+
+// 超小屏幕适配
+@media (max-width: 480px) {
+  .panel {
+    width: 95vw;
+    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;
+    }
+  }
+}
 </style>
--- 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}">
+    <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 {
@@ -52,4 +53,80 @@ defineProps<{
  height: calc(100vh - 1.8rem);
 }

+// 移动端适配
+@media (max-width: 768px) {
+  .wrap {
+    height: calc(100vh - 6rem);
+    width: 100vw;
+    padding: 0 1rem;
+    box-sizing: border-box;
+  }
+  
+  .footer-hide {
+    .wrap {
+      height: calc(100vh - 2rem) !important;
+    }
+    
+    .footer-wrap {
+      bottom: calc(-10rem + env(safe-area-inset-bottom, 0px));
+    }
+  }
+  
+  .footer-wrap {
+    bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
+    left: 0.5rem;
+    right: 0.5rem;
+    width: auto;
+  }
+  
+  .panel-wrap {
+    position: fixed;
+    top: 0;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0;
+    height: 100vh;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    box-sizing: border-box;
+    
+    // 当面板未显示时，禁用指针事件
+    pointer-events: none;
+    
+    // 只有当面板显示时才添加背景蒙版并启用指针事件
+    &.has-panel {
+      background: rgba(0, 0, 0, 0.5);
+      pointer-events: auto;
+    }
+  }
+}
+
+// 超小屏幕适配
+@media (max-width: 480px) {
+  .wrap {
+    height: calc(100vh - 5rem);
+    padding: 0 0.5rem;
+  }
+  
+  .footer-hide {
+    .wrap {
+      height: calc(100vh - 1.5rem) !important;
+    }
+  }
+  
+  .footer-wrap {
+    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>
--- a/src/components/list/DictGroup.vue
+++ b/src/components/list/DictGroup.vue
@@ -63,4 +63,49 @@ watch(() => props.groupByTag, () => {
  }
 }

+// 移动端适配
+@media (max-width: 768px) {
+  .flex.items-center {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+    
+    .category {
+      font-size: 1rem;
+      font-weight: bold;
+    }
+    
+    .tags {
+      margin: 0.5rem 0;
+      gap: 0.3rem;
+      
+      .tag {
+        padding: 0.3rem 0.8rem;
+        font-size: 0.9rem;
+        min-height: 44px;
+        min-width: 44px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+}
+
+// 超小屏幕适配
+@media (max-width: 480px) {
+  .flex.items-center {
+    .category {
+      font-size: 0.9rem;
+    }
+    
+    .tags {
+      .tag {
+        padding: 0.2rem 0.6rem;
+        font-size: 0.8rem;
+      }
+    }
+  }
+}
+
 </style>
--- a/src/components/list/DictList.vue
+++ b/src/components/list/DictList.vue
@@ -34,4 +34,78 @@ const emit = defineEmits<{
  gap: 1rem;
 }

+// 移动端适配
+@media (max-width: 768px) {
+  .flex.gap-4.flex-wrap {
+    gap: 0.5rem;
+    
+    .book {
+      width: 5rem;
+      height: calc(5rem * 1.4);
+      padding: 0.5rem;
+      cursor: pointer;
+      position: relative;
+      z-index: 10;
+      
+      .text-base {
+        font-size: 0.8rem;
+        line-height: 1.2;
+        word-break: break-word;
+        margin-bottom: 0.2rem;
+      }
+      
+      .text-sm {
+        font-size: 0.7rem;
+        line-height: 1.1;
+        margin-bottom: 0.3rem;
+      }
+      
+      .absolute.bottom-4.right-3 {
+        bottom: 0.8rem;
+        right: 0.3rem;
+        font-size: 0.7rem;
+        line-height: 1;
+      }
+      
+      .absolute.bottom-2.left-3.right-3 {
+        bottom: 0.2rem;
+        left: 0.3rem;
+        right: 0.3rem;
+      }
+      
+      .absolute.left-3.bottom-3 {
+        left: 0.3rem;
+        bottom: 0.3rem;
+      }
+    }
+  }
+}
+
+// 超小屏幕适配
+@media (max-width: 480px) {
+  .flex.gap-4.flex-wrap {
+    gap: 0.3rem;
+    
+    .book {
+      width: 4.5rem;
+      height: calc(4.5rem * 1.4);
+      padding: 0.4rem;
+      
+      .text-base {
+        font-size: 0.7rem;
+        line-height: 1.1;
+      }
+      
+      .text-sm {
+        font-size: 0.6rem;
+        line-height: 1;
+      }
+      
+      .absolute.bottom-4.right-3 {
+        font-size: 0.6rem;
+      }
+    }
+  }
+}
+
 </style>
--- a/src/config/env.ts
+++ b/src/config/env.ts
@@ -28,14 +28,16 @@ AppEnv.CAN_REQUEST = AppEnv.IS_LOGIN && AppEnv.IS_OFFICIAL

 export const RESOURCE_PATH = ENV.API + 'static'

+const BASE_URL = (import.meta as any).env?.BASE_URL || '/'
+
 export const DICT_LIST = {
  WORD: {
-    ALL: '/list/word.json',
-    RECOMMENDED: '/list/recommend_word.json',
+    ALL: `${BASE_URL}list/word.json`,
+    RECOMMENDED: `${BASE_URL}list/recommend_word.json`,
  },
  ARTICLE: {
-    ALL: '/list/article.json',
-    RECOMMENDED: '/list/article.json',
+    ALL: `${BASE_URL}list/article.json`,
+    RECOMMENDED: `${BASE_URL}list/article.json`,
  }
 }

--- 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 {
--- 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 flex-col md:flex-row justify-between gap-space p-4 md:p-6">
+      <div class="mb-4 md:mb-0 md:w-44">
        <Book
            v-if="base.sbook.id"
            :is-add="false"
@@ -180,12 +180,12 @@ 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-1 md:px-4 min-w-0">
+        <div class="flex items-center min-w-0">
+          <div class="title mr-4 truncate">本周学习记录</div>
          <div class="flex gap-4 color-gray">
            <div
-                class="w-8 h-8 rounded-md center"
+                class="w-6 h-6 md:w-8 md:h-8 rounded-md center text-sm md:text-base"
                :class="item ? 'bg-[#409eff] color-white' : 'bg-gray-200'"
                v-for="(item, i) in weekList"
                :key="i"
@@ -193,34 +193,33 @@ const {data: recommendBookList, isFetching} = useFetch(resourceWrap(DICT_LIST.AR
            </div>
          </div>
        </div>
-        <div class="flex gap-4 items-center mt-3 gap-space">
-          <div class="stat">
-            <div class="num">{{ todayTotalSpend }}</div>
-            <div class="txt">今日学习时长</div>
+        <div class="flex flex-col sm:flex-row gap-4 items-center mt-3 gap-space w-full">
+          <div class="w-full sm:flex-1 rounded-xl p-4 box-border relative bg-[var(--bg-history)] border border-gray-200">
+            <div class="text-[#409eff] text-xl font-bold">{{ todayTotalSpend }}</div>
+            <div class="text-gray-500">今日学习时长</div>
          </div>
-          <div class="stat">
-            <div class="num">{{ totalDay }}</div>
-            <div class="txt">总学习天数</div>
+          <div class="w-full sm:flex-1 rounded-xl p-4 box-border relative bg-[var(--bg-history)] border border-gray-200">
+            <div class="text-[#409eff] text-xl font-bold">{{ totalDay }}</div>
+            <div class="text-gray-500">总学习天数</div>
          </div>
-          <div class="stat">
-            <div class="num">{{ totalSpend }}</div>
-            <div class="txt">总学习时长</div>
+          <div class="w-full sm:flex-1 rounded-xl p-4 box-border relative bg-[var(--bg-history)] border border-gray-200">
+            <div class="text-[#409eff] text-xl font-bold">{{ totalSpend }}</div>
+            <div class="text-gray-500">总学习时长</div>
          </div>
        </div>
-
-        <Progress class="mt-3"
+        <Progress class="mt-3 w-full md:w-auto"
                  :percentage="base.currentBookProgress"
                  :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-row md:flex-col justify-between items-center md:items-end gap-3 mt-4 md:mt-0 min-w-0">
        <div class="flex gap-4 items-center" v-opacity="base.sbook.id">
          <div class="color-link cursor-pointer" @click="router.push('/book-list')">更换</div>
        </div>
-        <BaseButton size="large"
+        <BaseButton size="large" class="w-full md:w-auto"
                    @click="startStudy"
                    :disabled="!base.currentBook.name">
-          <div class="flex items-center gap-2">
+          <div class="flex items-center gap-2 justify-center w-full">
            <span class="line-height-[2]">{{ isSaveData ? '继续学习' : '开始学习' }}</span>
            <IconFluentArrowCircleRight16Regular class="text-xl"/>
          </div>
--- 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>
--- a/src/pages/article/PracticeArticles.vue
+++ b/src/pages/article/PracticeArticles.vue
@@ -663,4 +663,100 @@ provide('currentPractice', currentPractice)
    }
  }
 }
+
+// 移动端适配
+@media (max-width: 768px) {
+  // 优化练习区域布局
+  .practice-article {
+    padding-top: 3rem; // 为固定标题留出空间
+  }
+  
+  // 优化标题区域
+  .typing-article {
+    header {
+      position: fixed;
+      top: 4.5rem; // 避开顶部导航栏
+      left: 0;
+      right: 0;
+      z-index: 100;
+      background: var(--bg-color);
+      padding: 0.5rem 1rem;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      margin-bottom: 0;
+      
+      .title {
+        font-size: 1rem;
+        line-height: 1.4;
+        word-break: break-word;
+        
+        .font-family {
+          font-size: 0.9rem;
+        }
+      }
+      
+      .titleTranslate {
+        font-size: 0.8rem;
+        margin-top: 0.2rem;
+        opacity: 0.8;
+      }
+    }
+    
+    .article-content {
+      margin-top: 2rem; // 为固定标题留出空间
+    }
+  }
+  
+  .footer {
+    width: 100%;
+    
+    .bottom {
+      padding: 0.3rem 0.5rem 0.5rem 0.5rem;
+      border-radius: 0.4rem;
+      
+      .stat {
+        margin-top: 0.3rem;
+        gap: 0.2rem;
+        flex-direction: row;
+        overflow-x: auto;
+        
+        .row {
+          min-width: 3.5rem;
+          gap: 0.2rem;
+          
+          .num {
+            font-size: 0.8rem;
+            font-weight: bold;
+          }
+          
+          .name {
+            font-size: 0.7rem;
+          }
+        }
+      }
+      
+      .flex.flex-col.items-center.justify-center.gap-1 {
+        .flex.gap-2.center {
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+          gap: 0.4rem;
+          
+          .base-icon {
+            padding: 0.3rem;
+            font-size: 1rem;
+            min-height: 44px;
+            min-width: 44px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+      }
+    }
+    
+    .arrow {
+      font-size: 1rem;
+      padding: 0.3rem;
+    }
+  }
+}
 </style>
--- a/src/pages/article/components/EditArticle.vue
+++ b/src/pages/article/components/EditArticle.vue
@@ -696,4 +696,116 @@ function setStartTime(val: Sentence, i: number, j: number) {
    }
  }
 }
+
+// 移动端适配
+@media (max-width: 768px) {
+  .content {
+    flex-direction: column;
+    padding: 0.5rem;
+    gap: 1rem;
+    
+    .row {
+      width: 100%;
+      flex: none;
+      
+      &:nth-child(3) {
+        flex: none;
+      }
+      
+      .title {
+        font-size: 1.2rem;
+      }
+      
+      // 表单元素优化
+      .base-input, .base-textarea {
+        width: 100%;
+        font-size: 16px; // 防止iOS自动缩放
+      }
+      
+      .base-textarea {
+        min-height: 150px;
+        max-height: 30vh;
+      }
+      
+      // 按钮组优化
+      .flex.gap-2 {
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        
+        .base-button {
+          min-height: 44px;
+          flex: 1;
+          min-width: 120px;
+        }
+      }
+      
+      // 文章翻译区域优化
+      .article-translate {
+        .section {
+          margin-bottom: 1rem;
+          
+          .section-title {
+            font-size: 1rem;
+            padding: 0.4rem;
+          }
+          
+          .sentence {
+            flex-direction: column;
+            gap: 0.5rem;
+            padding: 0.4rem;
+            
+            .flex-\[7\] {
+              width: 100%;
+            }
+            
+            .flex-\[2\] {
+              width: 100%;
+              justify-content: flex-start;
+              
+              .flex.justify-end.gap-2 {
+                justify-content: flex-start;
+                flex-wrap: wrap;
+                gap: 0.5rem;
+              }
+            }
+          }
+        }
+      }
+      
+      // 选项区域优化
+      .options {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+        
+        .status {
+          font-size: 0.9rem;
+        }
+        
+        .warning, .success {
+          font-size: 1rem;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .content {
+    padding: 0.3rem;
+    
+    .row {
+      .base-textarea {
+        min-height: 120px;
+      }
+      
+      .flex.gap-2 {
+        .base-button {
+          min-width: 100px;
+          font-size: 0.9rem;
+        }
+      }
+    }
+  }
+}
 </style>
--- a/src/pages/article/components/TypingArticle.vue
+++ b/src/pages/article/components/TypingArticle.vue
@@ -19,6 +19,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,
@@ -49,7 +50,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)
@@ -84,6 +86,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({
@@ -149,6 +152,7 @@ function init() {
    typeArticleRef?.scrollTo({top: 0, behavior: "smooth"})
  }
  checkTranslateLocation().then(() => checkCursorPosition())
+  focusMobileInput()
 }

 function checkCursorPosition(a = sectionIndex, b = sentenceIndex, c = wordIndex) {
@@ -180,6 +184,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) => {
@@ -204,6 +212,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
@@ -242,6 +286,7 @@ function nextSentence() {
    emit('play', {sentence: currentSection[sentenceIndex], handle: false})
  }
  lock = false
+  focusMobileInput()
 }
  
 function onTyping(e: KeyboardEvent) {
@@ -336,7 +381,7 @@ function onTyping(e: KeyboardEvent) {
    isTyping = false
  }
 }
-  
+
 function play() {
  let currentSection = props.article.sections[sectionIndex]
  emit('play', {sentence: currentSection[sentenceIndex], handle: true})
@@ -387,6 +432,7 @@ function del() {
    }
    input = currentWord.input = currentWord.input.slice(0, stringIndex)
    checkCursorPosition()
+    focusMobileInput()
  }
 }

@@ -524,6 +570,9 @@ onMounted(() => {
    wrong = input = ''
  })
  emitter.on(EventKey.onTyping, onTyping)
+  if (isMobile) {
+    focusMobileInput()
+  }
 })

 onUnmounted(() => {
@@ -549,7 +598,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>
@@ -601,6 +662,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>
@@ -701,6 +767,14 @@ $article-lh: 2.4;
    }
  }

+  .mobile-input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    height: 0;
+    width: 0;
+  }
+
  .article-content {
    position: relative;
  }
@@ -797,4 +871,124 @@ $article-lh: 2.4;
    }
  }
 }
+
+.sentence-translate-mobile {
+  display: none;
+}
+
+// 移动端适配
+@media (max-width: 768px) {
+  .typing-article {
+    width: 100vw;
+    max-width: 100%;
+    padding: 1rem 0.5rem;
+    
+    // 标题优化
+    header {
+      .title {
+        font-size: 1.2rem;
+        line-height: 1.4;
+        word-break: break-word;
+        margin-bottom: 1rem;
+        
+        .font-family {
+          font-size: 1rem;
+        }
+      }
+      
+      .titleTranslate {
+        font-size: 0.9rem;
+        margin-top: 0.5rem;
+        opacity: 0.8;
+      }
+    }
+    
+    // 句子显示优化
+    .article-content {
+      article {
+        .section {
+          margin-bottom: 1rem;
+          
+          .sentence {
+            font-size: 1rem;
+            line-height: 1.6;
+            word-break: break-word;
+            margin-bottom: 0.5rem;
+            
+            .word {
+              .word-wrap {
+                padding: 0.1rem 0.05rem;
+                min-height: 24px;
+                display: inline-flex;
+                align-items: center;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .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 {
+      display: none;
+    }
+    
+    // 问答表单优化
+    .question-form {
+      padding: 0.5rem;
+      
+      .base-button {
+        width: 100%;
+        min-height: 48px;
+        margin-top: 0.5rem;
+      }
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .typing-article {
+    padding: 0.5rem 0.3rem;
+    
+    header {
+      .title {
+        font-size: 1rem;
+        
+        .font-family {
+          font-size: 0.9rem;
+        }
+      }
+      
+      .titleTranslate {
+        font-size: 0.8rem;
+      }
+    }
+    
+    .article-content {
+      article {
+        .section {
+          .sentence {
+            font-size: 0.9rem;
+            line-height: 1.5;
+          }
+        }
+      }
+    }
+    
+    .sentence-translate-mobile {
+      font-size: 0.85rem;
+      line-height: 1.35;
+    }
+  }
+}
 </style>
--- a/src/pages/layout.vue
+++ b/src/pages/layout.vue
@@ -65,7 +65,35 @@ function goHome() {
        </BaseIcon>
      </div>
    </div>
-    <div class="flex-1 z-1 relative">
+    
+    <!-- 移动端顶部菜单栏 -->
+    <div class="mobile-top-nav" :class="{'collapsed': settingStore.mobileNavCollapsed}">
+      <div class="nav-items">
+        <div class="nav-item" @click="router.push('/')" :class="{'active': $route.path === '/'}">
+          <IconFluentHome20Regular/>
+          <span>主页</span>
+        </div>
+        <div class="nav-item" @click="router.push('/words')" :class="{'active': $route.path.includes('/words')}">
+          <IconFluentTextUnderlineDouble20Regular/>
+          <span>单词</span>
+        </div>
+        <div class="nav-item" @click="router.push('/articles')" :class="{'active': $route.path.includes('/articles')}">
+          <IconFluentBookLetter20Regular/>
+          <span>文章</span>
+        </div>
+        <div class="nav-item" @click="router.push('/setting')" :class="{'active': $route.path === '/setting'}">
+          <IconFluentSettings20Regular/>
+          <span>设置</span>
+          <div class="red-point" v-if="runtimeStore.isNew"></div>
+        </div>
+      </div>
+      <div class="nav-toggle" @click="settingStore.mobileNavCollapsed = !settingStore.mobileNavCollapsed">
+        <IconFluentChevronDown20Filled v-if="!settingStore.mobileNavCollapsed"/>
+        <IconFluentChevronUp20Filled v-else/>
+      </div>
+    </div>
+    
+    <div class="flex-1 z-1 relative main-content">
      <router-view></router-view>
    </div>
  </div>
@@ -114,4 +142,130 @@ function goHome() {
    width: var(--aside-width);
  }
 }
+
+// 移动端顶部菜单栏
+.mobile-top-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: var(--color-second);
+  border-bottom: 1px solid var(--color-item-border);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  transition: all 0.3s ease;
+  
+  .nav-items {
+    display: flex;
+    justify-content: space-around;
+    padding: 0.5rem 0;
+    
+    .nav-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 0.5rem;
+      cursor: pointer;
+      transition: all 0.2s;
+      min-height: 44px;
+      min-width: 44px;
+      justify-content: center;
+      position: relative;
+      
+      svg {
+        font-size: 1.2rem;
+        margin-bottom: 0.2rem;
+        color: var(--color-main-text);
+      }
+      
+      span {
+        font-size: 0.7rem;
+        color: var(--color-main-text);
+        text-align: center;
+      }
+      
+      &.active {
+        svg, span {
+          color: var(--color-select-bg);
+        }
+      }
+      
+      &:active {
+        transform: scale(0.95);
+      }
+      
+      .red-point {
+        position: absolute;
+        top: 0.2rem;
+        right: 0.2rem;
+        width: 0.4rem;
+        height: 0.4rem;
+        background: #ff4444;
+        border-radius: 50%;
+      }
+    }
+  }
+  
+  .nav-toggle {
+    position: absolute;
+    bottom: -1.5rem;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--color-second);
+    border: 1px solid var(--color-item-border);
+    border-top: none;
+    border-radius: 0 0 0.5rem 0.5rem;
+    padding: 0.3rem 0.8rem;
+    cursor: pointer;
+    transition: all 0.3s;
+    
+    svg {
+      font-size: 1rem;
+      color: var(--color-main-text);
+    }
+    
+    &:active {
+      transform: translateX(-50%) scale(0.95);
+    }
+  }
+  
+  &.collapsed {
+    transform: translateY(calc(-100% + 1.5rem));
+    
+    .nav-items {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+}
+
+.main-content {
+  // 移动端时为主内容区域添加顶部内边距，避免被顶部菜单遮挡
+  @media (max-width: 768px) {
+    padding-top: 4rem;
+  }
+}
+
+// 移动端隐藏左侧菜单栏
+@media (max-width: 768px) {
+  .aside {
+    display: none;
+  }
+  
+  .aside.space {
+    display: none;
+  }
+  
+  .main-content {
+    width: 100%;
+    margin-left: 0;
+  }
+}
+
+// 桌面端隐藏移动端顶部菜单栏
+@media (min-width: 769px) {
+  .mobile-top-nav {
+    display: none;
+  }
+}
 </style>
--- a/src/pages/setting/Setting.vue
+++ b/src/pages/setting/Setting.vue
@@ -1025,4 +1025,95 @@ function importOldData() {
    opacity: 0;
  }
 }
+
+// 移动端适配
+@media (max-width: 768px) {
+  .setting {
+    flex-direction: column;
+    
+    .left {
+      width: 100%;
+      border-right: none;
+      border-bottom: 2px solid gainsboro;
+      
+      .tabs {
+        flex-direction: row;
+        overflow-x: auto;
+        padding: 0.5rem;
+        gap: 0.3rem;
+        
+        .tab {
+          white-space: nowrap;
+          padding: 0.4rem 0.6rem;
+          font-size: 0.9rem;
+          
+          span {
+            display: none;
+          }
+        }
+      }
+    }
+    
+    .content {
+      padding: 0 1rem;
+      
+      .row {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+        min-height: auto;
+        padding: 0.5rem 0;
+        
+        .wrapper {
+          width: 100%;
+          justify-content: flex-start;
+          
+          .set-key {
+            width: 100%;
+            
+            input {
+              width: 100%;
+              max-width: 200px;
+            }
+          }
+          
+          // 补充：选择器和输入框优化
+          .base-select, .base-input {
+            width: 100% !important;
+            max-width: none;
+          }
+          
+          // 单选按钮组优化
+          .radio-group {
+            flex-direction: column;
+            gap: 0.5rem;
+            
+            .radio {
+              min-height: 44px;
+              width: 100%;
+            }
+          }
+          
+          // 滑块优化
+          .slider {
+            width: 100%;
+          }
+        }
+        
+        .main-title {
+          font-size: 1rem;
+        }
+        
+        .item-title {
+          font-size: 0.9rem;
+        }
+      }
+      
+      .body {
+        height: auto;
+        max-height: 60vh;
+      }
+    }
+  }
+}
 </style>
--- 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>
--- 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 { AppEnv, 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>
--- a/src/pages/word/DictList.vue
+++ b/src/pages/word/DictList.vue
@@ -81,8 +81,8 @@ const searchList = computed<any[]>(() => {

 <template>
  <BasePage>
-    <div class="card min-h-200" v-loading="isFetching">
-      <div class="flex items-center relative gap-2">
+    <div class="card min-h-200 dict-list-page" v-loading="isFetching">
+      <div class="flex items-center relative gap-2 header-section">
        <BackIcon class="z-2" @click='router.back'/>
        <div class="flex flex-1 gap-4" v-if="showSearchInput">
          <BaseInput clearable placeholder="请输入词典名称/缩写/类别" v-model="searchKey" class="flex-1" autofocus/>
@@ -123,4 +123,75 @@ const searchList = computed<any[]>(() => {
 </template>

 <style scoped lang="scss">
+// 移动端适配
+@media (max-width: 768px) {
+  .dict-list-page {
+    padding: 0.8rem;
+    margin-bottom: 1rem;
+    
+    .header-section {
+      flex-direction: column;
+      gap: 0.5rem;
+      
+      .flex.flex-1.gap-4 {
+        width: 100%;
+        
+        .base-input {
+          font-size: 0.9rem;
+        }
+        
+        .base-button {
+          padding: 0.5rem 0.8rem;
+          font-size: 0.9rem;
+        }
+      }
+      
+      .py-1.flex.flex-1.justify-end {
+        width: 100%;
+        
+        .page-title {
+          font-size: 1.2rem;
+        }
+        
+        .base-icon {
+          font-size: 1.2rem;
+        }
+      }
+    }
+    
+    .mt-4 {
+      margin-top: 0.8rem;
+    }
+  }
+}
+
+// 超小屏幕适配
+@media (max-width: 480px) {
+  .dict-list-page {
+    padding: 0.5rem;
+    
+    .header-section {
+      .flex.flex-1.gap-4 {
+        .base-input {
+          font-size: 0.8rem;
+        }
+        
+        .base-button {
+          padding: 0.4rem 0.6rem;
+          font-size: 0.8rem;
+        }
+      }
+      
+      .py-1.flex.flex-1.justify-end {
+        .page-title {
+          font-size: 1rem;
+        }
+        
+        .base-icon {
+          font-size: 1rem;
+        }
+      }
+    }
+  }
+}
 </style>
--- a/src/pages/word/PracticeWords.vue
+++ b/src/pages/word/PracticeWords.vue
@@ -682,6 +682,34 @@ useEvents([
  width: var(--toolbar-width);
 }

+// 移动端适配
+@media (max-width: 768px) {
+  .practice-word {
+    width: 100%;
+    
+    .absolute.z-1.top-4 {
+      z-index: 100; // 提高层级，确保不被遮挡
+      
+      .center.gap-2.cursor-pointer {
+        min-height: 44px;
+        min-width: 44px;
+        padding: 0.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        .word {
+          pointer-events: none; // 文字不拦截点击
+        }
+        
+        .arrow {
+          pointer-events: none; // 箭头图标不拦截点击
+        }
+      }
+    }
+  }
+}
+
 .word-panel-wrapper {
  position: absolute;
  left: var(--panel-margin-left);
--- a/src/pages/word/Statistics.vue
+++ b/src/pages/word/Statistics.vue
@@ -269,6 +269,95 @@ calcWeekList(); // 新增：计算本周学习记录
    </div>
  </Dialog>
 </template>
+<style scoped lang="scss">
+
+// 移动端适配
+@media (max-width: 768px) {
+  // 弹窗容器优化
+  .w-140 {
+    width: 90vw !important;
+    max-width: 500px;
+    padding: 1.5rem !important;
+  }
+
+  // 标题优化
+  .center.text-2xl {
+    font-size: 1.3rem;
+    margin-bottom: 1rem;
+  }
+
+  // 统计数据布局
+  .flex .flex-1 {
+    .text-sm {
+      font-size: 0.8rem;
+    }
+
+    .text-4xl {
+      font-size: 2rem;
+    }
+  }
+
+  // 时间显示
+  .text-xl {
+    font-size: 1rem;
+
+    .text-2xl {
+      font-size: 1.5rem;
+    }
+  }
+
+  // 错词/正确统计卡片
+  .flex.justify-center.gap-10 {
+    gap: 1rem;
+    flex-wrap: wrap;
+
+    > div {
+      padding: 0.8rem 2rem;
+
+      .text-3xl {
+        font-size: 1.8rem;
+      }
+    }
+  }
+
+  // 本周学习记录
+  .flex.gap-4 {
+    gap: 0.5rem;
+
+    .w-8.h-8 {
+      width: 2rem;
+      height: 2rem;
+      font-size: 0.9rem;
+    }
+  }
+
+  // 按钮组
+  .flex.justify-center.gap-4 {
+    flex-direction: column;
+    gap: 0.5rem;
+
+    .base-button {
+      width: 100%;
+      min-height: 48px;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .w-140 {
+    width: 95vw !important;
+    padding: 1rem !important;
+  }
+
+  .flex .flex-1 {
+    .text-4xl {
+      font-size: 1.5rem;
+    }
+  }
+}
+
+</style>
+

 <style scoped>
 .item {
--- a/src/pages/word/WordsPage.vue
+++ b/src/pages/word/WordsPage.vue
@@ -201,8 +201,8 @@ const {

 <template>
  <BasePage>
-    <div class="card flex gap-8">
-      <div class="flex-1 flex flex-col justify-between">
+    <div class="card flex flex-col md:flex-row gap-8">
+      <div class="flex-1 w-full flex flex-col justify-between">
        <div class="flex gap-3">
          <div class="p-1 center rounded-full bg-white">
            <IconFluentBookNumber20Filled class="text-xl color-link"/>
@@ -262,7 +262,7 @@ const {
        </div>
      </div>

-      <div class="flex-1" :class="!store.sdict.id && 'opacity-30 cursor-not-allowed'">
+      <div class="flex-1 w-full mt-4 md:mt-0" :class="!store.sdict.id && 'opacity-30 cursor-not-allowed'">
        <div class="flex justify-between">
          <div class="flex items-center gap-2">
            <div class="p-2 center rounded-full bg-white ">
--- a/src/pages/word/components/Footer.vue
+++ b/src/pages/word/components/Footer.vue
@@ -184,18 +184,17 @@ const progress = $computed(() => {

 <style scoped lang="scss">

-
 .footer {
  flex-shrink: 0;
  width: var(--toolbar-width);
  position: relative;
+  z-index: 20; // 提高z-index确保在最上方

  &.hide {
    margin-bottom: -6rem;
    margin-top: 3rem;

    .progress-wrap {
-
      bottom: calc(100% + 1.8rem);
    }
  }
@@ -206,10 +205,10 @@ 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);
+    z-index: 10;

    .stat {
      margin-top: .5rem;
@@ -240,6 +239,7 @@ const progress = $computed(() => {
    box-sizing: border-box;
    position: fixed;
    bottom: 1rem;
+    z-index: 1; // 确保进度条也在最上方
  }

  .arrow {
@@ -258,4 +258,112 @@ const progress = $computed(() => {
    }
  }
 }
+
+// 移动端适配
+@media (max-width: 768px) {
+  .footer {
+    width: 100%;
+    
+    .bottom {
+      padding: 0.3rem 0.5rem 0.5rem 0.5rem;
+      border-radius: 0.4rem;
+      
+      .stat {
+        margin-top: 0.3rem;
+        gap: 0.2rem;
+        flex-direction: row;
+        overflow-x: auto;
+        
+        .row {
+          min-width: 3.5rem;
+          gap: 0.2rem;
+          
+          .num {
+            font-size: 0.8rem;
+            font-weight: bold;
+          }
+          
+          .name {
+            font-size: 0.7rem;
+          }
+        }
+      }
+      
+      // 移动端按钮组调整 - 改为网格布局
+      .flex.gap-2 {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 0.4rem;
+        justify-content: center;
+        
+        .base-icon {
+          padding: 0.3rem;
+          font-size: 1rem;
+          min-height: 44px;
+          min-width: 44px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+    
+    .progress-wrap {
+      width: 100%;
+      padding: 0 0.5rem;
+      bottom: 0.5rem;
+    }
+    
+    .arrow {
+      font-size: 1rem;
+      padding: 0.3rem;
+    }
+  }
+}
+
+// 超小屏幕适配
+@media (max-width: 480px) {
+  .footer {
+    .bottom {
+      padding: 0.2rem 0.3rem 0.3rem 0.3rem;
+      
+      .stat {
+        margin-top: 0.2rem;
+        gap: 0.1rem;
+        
+        .row {
+          min-width: 3rem;
+          gap: 0.1rem;
+          
+          .num {
+            font-size: 0.7rem;
+          }
+          
+          .name {
+            font-size: 0.6rem;
+          }
+          
+          // 隐藏部分统计信息，只保留关键数据
+          &:nth-child(n+3) {
+            display: none;
+          }
+        }
+      }
+      
+      .flex.gap-2 {
+        gap: 0.2rem;
+        
+        .base-icon {
+          padding: 0.2rem;
+          font-size: 0.9rem;
+        }
+      }
+    }
+    
+    .progress-wrap {
+      padding: 0 0.3rem;
+      bottom: 0.3rem;
+    }
+  }
+}
 </style>
--- a/src/pages/word/components/PracticeSettingDialog.vue
+++ b/src/pages/word/components/PracticeSettingDialog.vue
@@ -136,4 +136,80 @@ watch(() => model.value, (n) => {
    @apply bg-blue color-white;
  }
 }
+
+// 移动端适配
+@media (max-width: 768px) {
+  .target-modal {
+    width: 90vw !important;
+    max-width: 400px;
+    padding: 0 1rem;
+    
+    // 模式选择
+    .center .flex.gap-4 {
+      width: 100%;
+      flex-direction: column;
+      height: auto;
+      gap: 0.8rem;
+      
+      .mode-item {
+        width: 100%;
+        padding: 1rem;
+        
+        .title {
+          font-size: 1rem;
+        }
+        
+        .desc {
+          font-size: 0.85rem;
+          margin-top: 0.5rem;
+        }
+      }
+    }
+    
+    // 统计显示
+    .text-center {
+      font-size: 0.9rem;
+      
+      .text-3xl {
+        font-size: 1.5rem;
+      }
+    }
+    
+    // 滑块控件
+    .flex.mb-4, .flex.mb-6 {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.5rem;
+      
+      span {
+        width: 100%;
+      }
+      
+      .flex-1 {
+        width: 100%;
+      }
+    }
+    
+    // 按钮
+    .base-button {
+      width: 100%;
+      min-height: 44px;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .target-modal {
+    width: 95vw !important;
+    padding: 0 0.5rem;
+    
+    .text-center {
+      font-size: 0.8rem;
+      
+      .text-3xl {
+        font-size: 1.2rem;
+      }
+    }
+  }
+}
 </style>
--- a/src/pages/word/components/TypeWord.vue
+++ b/src/pages/word/components/TypeWord.vue
@@ -149,7 +149,6 @@ function unknown(e) {
 }

 async function onTyping(e: KeyboardEvent) {
-  debugger
  let word = props.word.word
  // 输入完成会锁死不能再输入
  if (inputLock) {
@@ -589,6 +588,7 @@ useEvents([
  word-break: break-word;
  position: relative;
  color: var(--color-font-2);
+  padding-bottom: 8rem;

  .phonetic, .translate {
    font-size: 1.2rem;
@@ -651,6 +651,126 @@ useEvents([
    font-family: var(--en-article-family);
    @apply text-lg w-12;
  }
+}
+    
+// 隐藏光标
+.cursor {
+  display: none !important;
+}

+// 移动端适配
+@media (max-width: 768px) {
+  .typing-word {
+    padding: 0 0.5rem 12rem;
+    
+    .word {
+      font-size: 2rem !important;
+      letter-spacing: 0.1rem;
+      margin: 0.5rem 0;
+    }
+    
+    .phonetic, .translate {
+      font-size: 1rem;
+    }
+    
+    .label {
+      width: 4rem;
+      font-size: 0.9rem;
+    }
+    
+    .cn {
+      font-size: 0.9rem;
+    }
+    
+    .en {
+      font-size: 1rem;
+    }
+    
+    .pos {
+      font-size: 0.9rem;
+      width: 3rem;
+    }
+    
+    // 移动端按钮组调整
+    .flex.gap-4 {
+      flex-direction: column;
+      width: 100%;
+      gap: 0.5rem;
+      position: relative;
+      z-index: 10; // 确保按钮不被其他元素遮挡
+      
+      .base-button {
+        width: 100%;
+        min-height: 48px;
+        padding: 0.8rem;
+        font-size: 1.1rem;
+        font-weight: 500;
+        cursor: pointer;
+      }
+    }
+    
+    // 确保短语和例句区域保持默认层级
+    .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; // 允许点击但不调起输入法
+    }
+    
+    // 移动端短语调整
+    .flex.items-center.gap-4 {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.2rem;
+    }
+  }
+}
+
+// 超小屏幕适配
+@media (max-width: 480px) {
+  .typing-word {
+    padding: 0 0.3rem 12rem;
+    
+    .word {
+      font-size: 1.5rem !important;
+      letter-spacing: 0.05rem;
+      margin: 0.3rem 0;
+    }
+    
+    .phonetic, .translate {
+      font-size: 0.9rem;
+    }
+    
+    .label {
+      width: 3rem;
+      font-size: 0.8rem;
+    }
+    
+    .cn {
+      font-size: 0.8rem;
+    }
+    
+    .en {
+      font-size: 0.9rem;
+    }
+    
+    .pos {
+      font-size: 0.8rem;
+      width: 2.5rem;
+    }
+    
+    .sentence {
+      font-size: 0.8rem;
+      line-height: 1.3;
+    }
+  }
 }
 </style>
--- a/src/stores/setting.ts
+++ b/src/stores/setting.ts
@@ -53,6 +53,7 @@ export interface SettingState {
  disableShowPracticeSettingDialog: boolean // 不默认显示练习设置弹框
  autoNextWord: boolean //自动切换下一个单词
  inputWrongClear: boolean //单词输入错误，清空已输入内容
+  mobileNavCollapsed: boolean // 移动端底部导航栏收缩状态
  ignoreSymbol: boolean //过滤符号
 }

@@ -104,6 +105,7 @@ export const getDefaultSettingState = (): SettingState => ({
  disableShowPracticeSettingDialog: false,
  autoNextWord: true,
  inputWrongClear: false,
+  mobileNavCollapsed: false,
  ignoreSymbol: true
 })