Merge branch 'refs/heads/master' into dev

# Conflicts:
#	components.d.ts
#	src/pages/word/Statistics.vue

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>

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('/')

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>

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>

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>

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>