feat: 移动端页面适配

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/Book.vue

@@ -60,6 +60,35 @@ const studyProgress = $computed(() => {
 </template>
 
 <style scoped lang="scss">
+.book {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  box-sizing: border-box;
+  
+  > div:first-child {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    margin-bottom: 2.5rem; // 为底部进度条和数字留出空间
+  }
+  
+  .text-base {
+    word-break: break-word;
+    line-height: 1.2;
+  }
+  
+  .text-sm {
+    word-break: break-word;
+    line-height: 1.1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+  }
+}
+
 .custom {
   position: absolute;
   top: 4px;

src/components/Panel.vue

@@ -42,4 +42,38 @@ 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: 80vh;
+    border-radius: 0.4rem;
+    
+    header {
+      padding: 0.5rem 0.5rem;
+      
+      .color-main {
+        font-size: 0.9rem;
+      }
+    }
+  }
+}
+
+// 超小屏幕适配
+@media (max-width: 480px) {
+  .panel {
+    width: 95vw;
+    max-height: 85vh;
+    
+    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}">
       <slot name="panel"></slot>
     </div>
     <div class="footer-wrap">
@@ -52,4 +52,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: -4rem;
+    }
+  }
+  
+  .footer-wrap {
+    bottom: 0.5rem;
+    left: 0.5rem;
+    right: 0.5rem;
+    width: auto;
+  }
+  
+  .panel-wrap {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    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: 0.3rem;
+    left: 0.3rem;
+    right: 0.3rem;
+  }
+  
+  .panel-wrap {
+    padding: 0.5rem;
+  }
+}
 </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>